import { Button } from "@mui/material";

// Icon
import CloseModalD from "@/components/icons/CloseModalD";
import ArrowLeftM from "@/components/icons/ArrowLeftM";
import AddressSelector from "./AddressSelector";
import { getStateInfoClient } from "@/lib/getStateInfoClient";

function Content({
  states,
  filter,
  sendReq,
  setFilter,
  handleClose,
  setDataInURL,
  filteredCities,
}) {
  const { matchedState } = getStateInfoClient();
  const handleClick = () => {
    handleClose();
    sendReq();
  };

  const updateData = (name, value) => {
    const newFilter =
      name === "state"
        ? {
            ...filter,
            state: value,
            city: null,
          }
        : {
            ...filter,
            [name]: value,
          };

    setDataInURL(newFilter);
    setFilter(newFilter);
  };

  return (
    <div>
      <div className="flex justify-end w-full">
        <div className="cursor-pointer" onClick={handleClose}>
          <CloseModalD />
        </div>
      </div>
      <div className="md:p-[24px] pt-0">
        <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
          شهر یا استان مورد نظر را انتخاب نمایید:
        </p>
        <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
          <AddressSelector
            name="state"
            list={states}
            label="استان"
            disabled={matchedState}
            value={filter?.state}
            updateData={updateData}
          />
          <AddressSelector
            name="city"
            label="شهر"
            value={filter?.city}
            list={filteredCities}
            updateData={updateData}
            disabled={!filter?.state}
          />
        </div>
        <div className="w-full flex justify-end">
          <Button
            disabled={!filter?.city || !filter?.state}
            className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
            onClick={handleClick}
            variant="contained"
            color="primary"
          >
            تایید و ادامه
            <ArrowLeftM />
          </Button>
        </div>
      </div>
    </div>
  );
}

export default Content;