import { useState } from "react";
import { Button } from "@/ui/Button";
import { api } from "@/lib/api";
import { useModalStore } from "@/stores/useModalStore";
import { modalOptions } from "@/consts/feedback";
import CustomCheckbox from "@/ui/CustomCheckbox";
import CheckIcon from "@/components/icons/CheckIcon";

function FeedbackModal({ id }: { id: string }) {
  const { setModal } = useModalStore();
  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);

  async function sendSources() {
    await api.put(`mail/${id}`, { json: { source: selectedOptions } });
    setModal(null);
  }

  function onCheckboxChange(value: string, checked: boolean) {
    if (checked) setSelectedOptions([...selectedOptions, value]);
    else {
      const updated = [...selectedOptions].filter((item) => item !== value);
      setSelectedOptions(updated);
    }
  }

  return (
    <div className="fixed top-[50%] translate-y-[-50%] flex md:flex-row flex-col md:max-w-[695px] max-w-[422px] max-[360px]:max-w-[340px] z-[15] md:p-[48px] p-[32px] max-[360px]:p-[24px]  bg-[#37393B99] backdrop-blur-xl backdrop-opacity-60 rounded-2xl">
      <div className="flex md:flex-col flex-row md:justify-center items-center md:max-w-[200px] md:gap-y-[16px] gap-x-[24px]">
        <div className="p-3 rounded-full bg-gradient translate-x-[4px]">
          <div className="z-10 absolute top-[-4px] left-[-4.3px] w-[56px] h-[56px] rounded-full bg-gradient-to-r from-[#6078F299] to-[#C868F599]" />
          <div className="text-white lg:size-[1.389vw] size-4 relative z-20">
            <CheckIcon />
          </div>
        </div>

        <span className="text-xl leading-6 md:text-center text-start max-[360px]:text-base">
          Мы получили заявку <br className="md:hidden block" /> и скоро свяжемся{" "}
          <br className="md:block hidden" /> с вами!
        </span>
      </div>

      <div className="md:w-[5px] md:mx-[48px] md:my-[0px] md:h-auto h-[2px] my-[24px] bg-[#37393B] rounded-sm "></div>

      <div>
        <div className="text-xl leading-6 mb-[20px] max-w-[250px] max-[360px]:text-base">
          Расскажите, пожалуйста, <br /> откуда вы узнали о нас?
        </div>

        <ul className="md:mb-[49px] mb-[58px] flex flex-col gap-y-[12px]">
          {modalOptions.map((item) => (
            <li key={item} className="flexfont-normal">
              <CustomCheckbox value={item} onChange={onCheckboxChange} />
            </li>
          ))}
        </ul>

        <div className="flex flex-row gap-x-[12px] ">
          <Button
            onClick={sendSources}
            className="md:px-[31px] max-[360px]:px-[32px] px-[43px] py-[15px] rounded-2xl max-[360px]:text-sm"
          >
            Отправить
          </Button>
          <Button
            onClick={() => setModal(null)}
            className="md:px-[31px] px-[43px] max-[360px]:px-[32px] py-[15px] rounded-2xl bg-[#37393B] max-[360px]:text-sm"
            color="secondary"
          >
            Пропустить
          </Button>
        </div>
      </div>
    </div>
  );
}

export default FeedbackModal;
