"use client";

import { useState } from "react";
import { styleDefault } from "@/mui";
import { Box, Button, Modal } from "@mui/material";

// Icon
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import CloseOrangeModal from "@/components/icons/CloseOrangeModal";
import ArrowBottomD from "@/components/icons/ArrowBottomD";
import ArrowLeftM from "@/components/icons/ArrowLeftM";
import SettingD from "@/components/icons/SettingD";

function ModalSearchCity() {
  const states = [
    { label: "تهران", id: 10 },
    { label: "اصفهان", id: 20 },
    { label: "مازندران", id: 30 },
  ];

  const cities = [
    { label: "شهر یک", id: 10 },
    { label: "شهر دو", id: 20 },
    { label: "شهر سه", id: 30 },
  ];

  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const [selected, setSelected] = useState({
    first: "",
    second: "",
  });

  const updateData = (event, name) =>
    setSelected({ ...selected, [name]: event });

  return (
    <>
      {/* Button Modal */}
      <Button
        className="
                    !border-none !min-w-fit lg:!min-w-[122px] !bg-[#F8F8FF] !rounded-l-none
                    !py-[15px] !px-[6px] md:!py-[17px] md:!px-[5px] lg:!py-[20px] lg:!px-[8px]
                "
        onClick={handleOpen}
        variant="contained"
        color="secondary"
      >
        <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px]">
          <SettingD />
        </div>
        <p className="text-[#616161] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-medium mx-2">
          {/* {selected.first && selected.second ?
                        `${selected.first} | ${selected.second}` : 'فیلترها'} */}
          فیلترها
        </p>
        <div className="w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]">
          <ArrowBottomD />
        </div>
      </Button>
      {/* Content Modal */}
      <Modal open={open} onClose={handleClose}>
        <Box
          sx={styleDefault}
          className="!w-full md:!min-w-[424px] !h-full md:!w-fit md:!h-fit"
        >
          <div className="flex justify-between w-full">
            <p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
            <Button
              className="cursor-pointer !p-0 flex items-center justify-center gap-1"
              onClick={handleClose}
              variant="text"
            >
              <CloseOrangeModal />
              <p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
            </Button>
          </div>
          <div className="px-[24px] pb-[24px]">
            <p className="text-[#525252] mt-[32px] text-[16px] font-medium text-center">
              شهر یا استان مورد نظر را انتخاب نمایید:
            </p>
            <div className="flex flex-col mt-[44px] mb-[56px] justify-center items-center gap-10">
              <AutoCompleteSelect
                updateData={updateData}
                label="استان"
                list={states}
                name="first"
              />
              <AutoCompleteSelect
                updateData={updateData}
                list={cities}
                name="second"
                label="شهر"
              />
            </div>
            <div className="w-full flex justify-end">
              <Button
                color="primary"
                variant="contained"
                className="flex !px-3 items-center justify-center gap-1 mr-auto"
                onClick={handleClose}
              >
                تایید و ادامه
                <ArrowLeftM />
              </Button>
            </div>
          </div>
        </Box>
      </Modal>
    </>
  );
}

export default ModalSearchCity;