import { useState } from "react";
import Form from "./Form";
import { Button } from "@mui/material";
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";

function Information({ user, dataUser }) {
  const [disable, setDisable] = useState(true);
  const [data, setData] = useState({
    phone: { value: dataUser.work_phone, isEdit: true },
    national_code: { value: dataUser.national_code, isEdit: true },
    name: { value: dataUser.name, isEdit: true },
    date_of_birth: { value: dataUser.birthday, isEdit: true },
    father_name: { value: dataUser.fathers_name, isEdit: true },
    insurance_number: { value: dataUser.supplementary_insurance, isEdit: true },
    home_phone: { value: dataUser.home_phone, isEdit: true },
    work_phone: { value: user.work_phone, isEdit: true },
  });
  const [selected, setSelected] = useState({
    gender: dataUser.gender,
    blood_group: dataUser.blood_type,
    insurance: dataUser.supplementary_insurance,
    marital_status: dataUser.marital_status,
    education: dataUser.education,
    job: dataUser.job,
  });

  const changeData = (value, type, name) => {
    disable && setDisable(false);
    setData({
      ...data,
      [name]: {
        ...data[name],
        [type]: value,
      },
    });
  };

  const updateSelect = (name, event) => {
    disable && setDisable(false);
    setSelected({ ...selected, [name]: event });
  };

  return (
    <div className="opacity-page">
      <Form
        data={data}
        changeData={changeData}
        selected={selected}
        updateSelect={updateSelect}
      />
      <Button
        disabled={disable}
        variant="contained"
        className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
                 !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
                !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]
              ${disable ? "" : "!bg-[#5559CE]"}`}
      >
        ثبت اطلاعات
        <ArrowLeftWhiteD />
      </Button>
    </div>
  );
}

export default Information;