"use client";

import { city, state } from "./listSelector";
import EditField from "@/app/component/EditField";
import ContentText from "@/app/component/ContentText";
import AddLocationP from "@/components/icons/AddLocationP";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import { useState } from "react";
import ModalMap from "./modal";

const validate_phone_number = {
  min: 1,
  max: 9999999999,
};

function Form({ parent, data, setData }) {
  const [open, setOpen] = useState(false);

  const handleClose = () => setOpen(false);
  const handleOpen = () => setOpen(true);

  const changeData = (value, type, name) =>
    type !== "isEdit" &&
    setData((prev) => {
      return {
        ...prev,
        [parent]: {
          ...prev[parent],
          [name]: {
            ...prev[parent][name],
            [type]: value,
          },
        },
      };
    });

  const updateNum = (value, type, name) => {
    const parseValue = +value;
    const { max } = validate_phone_number;
    const validateValue = parseValue > max ? data[name].value : value;
    changeData(validateValue, type, name);
  };

  return (
    <>
      <div className="mt-[24px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
        <ContentText text="استان">
          <AutoCompleteSelect
            updateData={changeData}
            label="انتخاب کنید..."
            name="state"
            list={state}
          />
        </ContentText>
        <ContentText text="شهر">
          <AutoCompleteSelect
            updateData={changeData}
            label="انتخاب کنید..."
            name="city"
            list={city}
          />
        </ContentText>
        <ContentText text="آدرس">
          <div className="relative w-full">
            <EditField
              icon={<AddLocationP />}
              isTransparent={true}
              placeholder="از روی نقشه انتخاب کنید..."
              iconGray={true}
              changeData={changeData}
              data={data?.address}
              name="address"
            />
            <div
              className="absolute left-0 top-0 w-full h-full opacity-0 z-10 cursor-pointer"
              onClick={handleOpen}
            ></div>
          </div>
        </ContentText>
        <ContentText text="شماره موبایل">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={updateNum}
            data={data?.phone}
            noDisable={true}
            type="number"
            placeholder="شماره موبایل"
            name="phone"
            props={{
              inputProps: validate_phone_number,
            }}
          />
        </ContentText>
        <ContentText text="شماره مطب">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={updateNum}
            data={data?.office_number1}
            noDisable={true}
            type="number"
            placeholder="شماره مطب"
            name="office_number1"
            props={{
              inputProps: validate_phone_number,
            }}
          />
        </ContentText>
        <ContentText text="شماره مطب">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={updateNum}
            data={data?.office_number2}
            noDisable={true}
            type="number"
            placeholder="شماره مطب"
            name="office_number2"
            props={{
              inputProps: validate_phone_number,
            }}
          />
        </ContentText>
      </div>
      <ModalMap open={open} handleClose={handleClose} />
    </>
  );
}

export default Form;
