"use client";

import { useState } from "react";

import ContentText from "../../../../../app/component/ContentText";
import EditField from "@/app/component/EditField";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import { bank, city, state } from "./listSelector";
import AddLocationP from "@/components/icons/AddLocationP";
import { Button } from "@mui/material";
import ArrowLeftButtonP from "@/components/icons/ArrowLeftButtonP";

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

function Form() {
  const [data, setData] = useState({
    name: { value: "", isEdit: true },
    national_code: { value: "", isEdit: true },
    address: { value: "", isEdit: true },
    phone: { value: "", isEdit: true },
    account_number: { value: "", isEdit: true },
  });
  const [selected, setSelected] = useState({
    state: "",
    city: "",
    bank: "",
  });
  const updateSelect = (event, name) =>
    setSelected({ ...selected, [name]: event });

  const changeData = (value, type, name) =>
    setData({
      ...data,
      [name]: {
        ...data[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="flex flex-col items-start justify-start mt-[24px] md:mt-[28px] lg:mt-[32px] gap-[32px] md:gap-[40px] lg:gap-[48px]">
      <ul className="grid w-full grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px] md:gap-y-[28px] lg:gap-y-[32px]">
        <ContentText text="نام و نام خانوادگی">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={changeData}
            data={data?.name}
            name="name"
          />
        </ContentText>
        <ContentText text="کد ملی">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={updateNum}
            data={data?.national_code}
            noDisable={true}
            type="number"
            placeholder="کد ملی"
            name="national_code"
            props={{
              inputProps: validate_phone_number,
            }}
          />
        </ContentText>
        <ContentText text="استان">
          <AutoCompleteSelect
            updateData={updateSelect}
            label="انتخاب کنید..."
            name="state"
            list={state}
          />
        </ContentText>
        <ContentText text="شهر">
          <AutoCompleteSelect
            updateData={updateSelect}
            label="انتخاب کنید..."
            name="city"
            list={city}
          />
        </ContentText>
        <ContentText text="آدرس">
          <EditField
            icon={<AddLocationP />}
            isTransparent={true}
            placeholder="از روی نقشه انتخاب کنید..."
            iconGray={true}
            changeData={changeData}
            data={data?.address}
            name="address"
          />
        </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?.account_number}
            noDisable={true}
            type="number"
            placeholder="شماره حساب"
            name="account_number"
            props={{
              inputProps: validate_phone_number,
            }}
          />
        </ContentText>
        <ContentText text="بانک">
          <AutoCompleteSelect
            updateData={updateSelect}
            label="انتخاب کنید..."
            name="bank"
            list={bank}
          />
        </ContentText>
      </ul>
      <div className="w-full flex justify-end">
        <Button
          variant="contained"
          className="!gap-[4px] !py-[8px] !px-[24px] !rounded-[4px] !w-full md:!w-fit 
            !shadow-none !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
        >
          ثبت اطلاعات
          <ArrowLeftButtonP />
        </Button>
      </div>
    </div>
  );
}

export default Form;