import React, { useState, useEffect, useRef } from "react";

const LANGUAGES = {
  EN: "en",
  RU: "ru",
  ZH: "zh",
};

const ListHeader = function ListHeader({
  isLangOpen,
  isOpen,
  onIconClick,
  selectedLanguageRight,
  isManualSelection,
  selectedSightId,
  nearestSightId,
  onTransferToggle,
  isTransferWidgetOpen,
  onBackToNearest,
}) {
  const [isIdle, setIsIdle] = useState(false);
  const timerRef = useRef(null);

  useEffect(() => {
    const resetTimer = () => {
      setIsIdle(false);
      clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => setIsIdle(true), 15000);
    };

    const events = ["pointermove", "pointerdown", "touchstart", "keydown"];
    events.forEach((e) => window.addEventListener(e, resetTimer));
    resetTimer();

    return () => {
      clearTimeout(timerRef.current);
      events.forEach((e) => window.removeEventListener(e, resetTimer));
    };
  }, []);

  const getTitle = () => {
    return selectedLanguageRight === LANGUAGES.RU
      ? "Достопримечательности"
      : selectedLanguageRight === LANGUAGES.ZH
      ? "景点"
      : "Attractions";
  };

  return (
    <div className="list-of-sights-control" onPointerUp={onIconClick}>
      <div
        className="svg-container"
        onPointerUp={onIconClick}
        role="button"
        tabIndex="0"
        aria-label={
          isOpen
            ? "Свернуть список достопримечательностей"
            : "Развернуть список достопримечательностей"
        }
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 21 12"
          fill="none"
          className={`chevron-svg${isOpen ? " is-open" : ""}${isIdle ? " is-idle" : ""}`}
        >
          <g clipPath="url(#clip0_658_91932)">
            <path
              d="M10.4257 3.53158C10.2908 3.71878 10.2229 3.84702 10.1248 3.9453C7.63081 6.43048 5.13303 8.91098 2.63903 11.3962C2.19286 11.8408 1.67878 12.0186 1.06565 11.8361C0.0337182 11.5281 -0.339817 10.2776 0.349713 9.45295C0.425175 9.36309 0.510069 9.28165 0.593077 9.19928C3.45496 6.35279 6.31778 3.50537 9.18060 0.659815C10.0654 -0.219125 10.854 -0.218188 11.7397 0.661687C14.6365 3.54 17.538 6.41457 20.4196 9.30786C20.6706 9.55966 20.88 9.91441 20.962 10.2561C21.1167 10.9019 20.7781 11.515 20.2131 11.8193C19.6462 12.1263 18.9387 12.0392 18.4482 11.5806C18.0709 11.2286 17.7125 10.8561 17.3474 10.491C15.1439 8.29601 12.9405 6.10193 10.7389 3.90599C10.6559 3.82362 10.5889 3.72721 10.4267 3.53158L10.4257 3.53158Z"
              fill="white"
            />
          </g>
          <defs>
            <clipPath id="clip0_658_91932">
              <rect
                width="21"
                height="12"
                fill="white"
                transform="translate(21 12) rotate(-180)"
              />
            </clipPath>
          </defs>
        </svg>
      </div>

      <div
        onPointerUp={onIconClick}
        className="list-of-sights-title"
        role="button"
        tabIndex="0"
        aria-label={
          isOpen
            ? "Свернуть список достопримечательностей"
            : "Развернуть список достопримечательностей"
        }
      >
        {getTitle()}
      </div>
    </div>
  );
};

export default ListHeader;
