import { useEffect, useState } from "react";
import { App } from "../types/App";
import ChevronLeftIcon from "./icons/ChevronLeftIcon";
import CloseIcon from "./icons/CloseIcon";
import LightningIcon from "./icons/LightningIcon";
import Button from "./Button";
import CheckIcon from "./icons/CheckIcon";
import ChevronDownIcon from "./icons/ChevronDownIcon";

interface Props {
  projects: App[];
  selectedProject: App | null;
  setSelectedProject: (project: App | null) => void;
  activeProject: App | null;
}

function ProjectSelector({
  projects,
  selectedProject,
  setSelectedProject,
  activeProject,
}: Props) {
  const [isOpen, setIsOpen] = useState(false);

  const [pointedProject, setPointedProject] = useState<App | null>(null);

  useEffect(() => {
    setPointedProject(selectedProject);
  }, [selectedProject]);

  return (
    <>
      <button
        className="p-[1.111vw] rounded-[0.833vw] bg-[#F6F6F6] flex justify-between items-center gap-[0.833vw]"
        onClick={(e) => {
          e.preventDefault();
          setIsOpen(true);
        }}
      >
        <div className="space-y-[0.278vw]">
          <p className="caption-s text-[#7D7D7D] w-fit font-medium">Проект</p>
          <p className="text-s font-medium w-fit">{selectedProject?.name}</p>
        </div>
        <div className="flex items-center gap-[0.556vw]">
          <img src="/images/app_image.png" className="size-[2.222vw]" alt="" />
          <div className="size-[1.389vw] text-[#7D7D7D]">
            <ChevronDownIcon />
          </div>
        </div>
      </button>
      {isOpen && (
        <div className="fixed z-1 top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 rounded-[2.222vw] bg-white p-[1.389vw] flex flex-col gap-[2.778vw] w-[25vw]">
          <div className="flex justify-between items-center">
            <Button variant="secondary" size="small">
              <div className="text-[#7D7D7D] size-[0.972vw]">
                <ChevronLeftIcon />
              </div>
            </Button>
            <p className="title-s font-medium">Смена проекта</p>
            <Button
              variant="secondary"
              size="small"
              onClick={(e) => {
                e.preventDefault();
                setIsOpen(false);
              }}
            >
              <span className="text-[#7D7D7D] size-[0.972vw]">
                <CloseIcon />
              </span>
            </Button>
          </div>
          <div className="flex flex-col gap-[1.667vw]">
            <div className="flex flex-col">
              {projects.map((project) => (
                <button
                  key={project.id}
                  onClick={(e) => {
                    e.preventDefault();
                    setPointedProject(project);
                  }}
                  className="flex justify-between items-center not-last:border-b py-[0.883vw] border-[#F6F6F6] cursor-pointer"
                >
                  <div className="flex items-center gap-[0.556vw]">
                    <img
                      src="/images/app_image.png"
                      className="size-[2.222vw] object-cover"
                      alt=""
                    />
                    <div className="space-y-[0.278vw]">
                      <div className="flex items-center gap-[0.278vw]">
                        <p className="text-s font-medium">{project.name}</p>
                        {activeProject &&
                          project.name === activeProject.name && (
                            <span className="size-[0.972vw] text-[#7B60F3]">
                              <LightningIcon />
                            </span>
                          )}
                      </div>
                      <p className="caption-s text-[#7D7D7D] font-medium">
                        Доступно 128 квартир
                      </p>
                    </div>
                  </div>
                  {pointedProject?.name === project.name ? (
                    <div className="size-[1.389vw] flex items-center justify-center rounded-full bg-[#7B60F3]">
                      <div className="size-[0.833vw] text-white">
                        <CheckIcon />
                      </div>
                    </div>
                  ) : (
                    <div className="rounded-full bg-[#F6F6F6] ring ring-[#F0F0F0] size-[1.389vw]" />
                  )}
                </button>
              ))}
            </div>
            <div className="flex flex-col gap-y-[0.556vw]">
              <Button
                variant="cta"
                size="large"
                onClick={() => {
                  setSelectedProject(pointedProject);
                  setIsOpen(false);
                }}
              >
                Переключиться
              </Button>
              <Button
                variant="primary"
                size="large"
                onClick={() => {
                  setIsOpen(false);
                }}
              >
                Отменить
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

export default ProjectSelector;
