import clsx from "clsx";
import ChevronDownIcon from "../icons/ChevronDownIcon";
import { useState } from "react";
import CheckIcon from "../icons/CheckIcon";
import { useClickAway } from "@uidotdev/usehooks";
import CloseIcon from "../icons/CloseIcon";
import { AnimatePresence, motion } from "framer-motion";

interface SelectProps {
  options: string[];
  value?: string;
  onChange: (value: string | undefined) => void;
  placeholder: string;
  className?: string;
}

function Select({
  options,
  value,
  onChange,
  placeholder,
  className,
}: SelectProps) {
  const [isOpen, setIsOpen] = useState(false);

  const ref = useClickAway<HTMLDivElement>(() => setIsOpen(false));

  return (
    <div
      ref={ref}
      className={clsx(
        "bg-[#F0EDE6] 2xl:p-[0.833vw] p-3 2xl:rounded-[1.111vw] rounded-2xl flex items-center 2xl:gap-[1.111vw] gap-4 relative cursor-pointer justify-between",
        className
      )}
      onClick={() => setIsOpen(!isOpen)}
      onTouchStart={(e) => {
        e.stopPropagation();
      }}
      onTouchMove={(e) => {
        if (isOpen) {
          e.stopPropagation();
        }
      }}
      onTouchEnd={(e) => {
        if (isOpen) {
          e.stopPropagation();
        }
      }}
    >
      <p
        className={clsx(
          "text-s text-nowrap text-ellipsis line-clamp-1",
          value ? "text-[#324D43]" : "text-[#A7A08E]"
        )}
      >
        {value || placeholder}
      </p>
      {value ? (
        <button
          onClick={(e) => {
            e.stopPropagation();
            onChange(undefined);
          }}
          className="cursor-pointer"
        >
          <div className="2xl:size-[1.111vw] size-4 text-[#A7A08E]">
            <CloseIcon />
          </div>
        </button>
      ) : (
        <div
          className={clsx(
            "2xl:size-[1.111vw] size-4 text-[#A7A08E] transition-transform",
            isOpen && "rotate-180"
          )}
        >
          <ChevronDownIcon />
        </div>
      )}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="absolute top-[calc(100%+0.556vw)] left-0 w-full z-10 bg-[#F7F6F3] 2xl:shadow-[0_0.556vw_1.111vw_0_#2327341A] shadow-[0_8px_16px_0_#2327341A] 2xl:p-[0.278vw] p-1 2xl:rounded-[1.111vw] rounded-2xl 2xl:max-h-[15.556vw] max-h-[224px] overflow-auto"
            onTouchStart={(e) => e.stopPropagation()}
            onTouchMove={(e) => e.stopPropagation()}
            onTouchEnd={(e) => e.stopPropagation()}
          >
            {options.map((option) => (
              <div
                key={option}
                className={clsx(
                  "text-s w-full 2xl:p-[0.833vw] p-3 flex justify-between items-center 2xl:gap-[0.139vw] gap-0.5 hover:bg-[#F0EDE6] hover:text-[#324D43] 2xl:rounded-[0.833vw] rounded-xl",
                  value === option ? "text-[#324D43]" : "text-[#A7A08E]"
                )}
                onClick={() => onChange(option)}
                onTouchStart={(e) => e.stopPropagation()}
                onTouchMove={(e) => e.stopPropagation()}
                onTouchEnd={(e) => e.stopPropagation()}
              >
                <p>{option}</p>
                {value === option && (
                  <div className="2xl:size-[1.111vw] size-4 text-[#F47F52]">
                    <CheckIcon />
                  </div>
                )}
              </div>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default Select;
