import { useState } from "react";
import { IOption } from "../types/selectorOption";
import ChevronDownIcon from "./icons/ChevronDownIcon";
import CheckIcon from "./icons/CheckIcon";
import { useClickAway } from "@uidotdev/usehooks";

interface TransparentSelectorProps {
  options: IOption[];
  onClick: (optId: string) => void;
}

const TransparentSelector = ({
  options,
  onClick,
}: TransparentSelectorProps) => {
  const [isOpened, setIsOpened] = useState(false);
  const selectedOpt = options.find((opt) => opt.isSelected)?.value;
  const selectorRef = useClickAway(() => {
    setIsOpened(false);
  }) as React.LegacyRef<HTMLDivElement> | undefined;
  const handleOnClick = () => {
    setIsOpened((prev) => !prev);
  };

  return (
    <div className="relative" ref={selectorRef}>
      <div
        className="text-[#00BED7] text-[38.4px] flex gap-[19.2px] items-center justify-center cursor-pointer select-none"
        onClick={handleOnClick}
      >
        {selectedOpt && <p className="text-[38.4px]">{selectedOpt} floor</p>}
        <div
          className={`zoom-280 ease-in-out duration-300 transition-transform ${
            isOpened ? "-rotate-180" : ""
          }`}
        >
          <ChevronDownIcon />
        </div>
      </div>

      {isOpened && options.length !== 0 && (
        <div className="flex flex-col bg-white p-[19.2px] absolute gap list-shadow">
          {options.map((opt) => (
            <div
              key={opt.id}
              onClick={() => onClick(opt.id)}
              className="px-[28.8px] py-[19.2px] text-[33.6px] flex gap-[19.2px]"
            >
              {opt.isSelected && (
                <div className="zoom-280 text-[#00BED7]">
                  <CheckIcon />
                </div>
              )}
              <p className="flex text-nowrap">{opt.value} floor</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default TransparentSelector;