import useModal from "../../store/useModal";
import Button from "../Button";
import CrossIcon from "../icons/CrossIcon";
import ResetIcon from "../icons/ResetIcon";
import Checkbox from "../Checkbox";
import Switch from "../Switch";
import MultiRangeSlider from "../MultiRangeSlider";

interface ICheckbox {
  title: string;
  id: string;
  disabled?: boolean;
}

const checkboxes: ICheckbox[] = [
  { title: "Studio Flex", id: "1", disabled: false },
  { title: "Studio", id: "2" },
  { title: "1 Bedroom", id: "3" },
  { title: "2 Bedroom", id: "4" },
];

const MasterplanFilters = () => {
  const { setModal } = useModal();
  const handleOnCloseClick = () => setModal(null);

  return (
    <div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center ">
      <div className="h-full col-span-3 bg-[#F3F3F2]  flex flex-col items-center justify-between ">
        <div className="w-full py-6 px-6 flex flex-col items-center">
          <div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4">
            <h2 className="text-subheadline-m font-semibold">Filters</h2>
            <Button
              icon={<CrossIcon />}
              buttonType="fab"
              onClick={handleOnCloseClick}
            />
          </div>
          <div className="flex flex-col pt-6 w-full">
            <p className="text-[#0D1922] text-m font-semibold pb-4">
              Apartment type
            </p>
            <div className="flex flex-col gap-2">
              {checkboxes.map((checkbox) => (
                <Checkbox
                  title={checkbox.title}
                  key={checkbox.id}
                  disabled={checkbox.disabled}
                />
              ))}
            </div>
          </div>
          <div className="flex flex-col pt-6 w-full gap-8">
            <div className="flex flex-col gap-2">
              <div className="flex justify-between items-center">
                <p className="text-[#0D1922] text-m font-semibold ">Cost</p>
                <p className="text-[#73787C] text-m font-semibold">AED</p>
              </div>
              <MultiRangeSlider min={1048888} max={2408888} />
            </div>
            <div className="flex flex-col gap-2">
              <div className="flex justify-between items-center">
                <p className="text-[#0D1922] text-m font-semibold ">
                  Total Area
                </p>
                <p className="text-[#73787C] text-m font-semibold">Sqft</p>
              </div>
              <MultiRangeSlider min={341} max={891} />
            </div>
            <div className="flex flex-col gap-2">
              <div className="flex justify-between items-center">
                <p className="text-[#0D1922] text-m font-semibold ">Floor</p>
                <p className="text-[#73787C] text-m font-semibold"></p>
              </div>
              <MultiRangeSlider min={5} max={81} />
            </div>

            <div className="flex flex-col gap-2">
              <div className="flex justify-between w-full">
                <p className="text-s text-[#73787C]">Not the first floor</p>
                <Switch />
              </div>
              <div className="flex justify-between w-full">
                <p className="text-s text-[#73787C]">Not the top floor</p>
                <Switch />
              </div>
            </div>
          </div>
        </div>

        <div className="w-full justify-items-end p-6 flex gap-2 justify-center bg-white rounded-se-2xl rounded-ss-2xl">
          <Button text="Reset" buttonType="secondary" icon={<ResetIcon />} />
          <div className="text-s text-[#0D1922] py-3 px-6 ">234 apartments</div>
        </div>
      </div>
    </div>
  );
};

export default MasterplanFilters;
