import { Button } from "@mui/material";
import FieldDate from "./FieldDate";
import { degree } from "./listSelector";
import RadioGender from "./RadioGender";

// Components
import EditField from "@/app/component/EditField";
import ContentText from "@/app/component/ContentText";
import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import { checkAllValues } from "@/helper";

function Form({ setValue, parent, data, setData }) {
  const changeData = (value, type, name) =>
    setData((prev) => {
      return {
        ...prev,
        [parent]: {
          ...prev[parent],
          [name]: {
            ...prev[parent][name],
            [type]: value,
          },
        },
      };
    });

  return (
    <div>
      <div className="mt-[24px] md:mt-[26px] lg:mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
        <ContentText text="نام و نام خانوادگی">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={changeData}
            data={data?.name}
            name="name"
          />
        </ContentText>
        <ContentText text="شماره نظام پزشکی">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={changeData}
            data={data?.medical_system_number}
            name="medical_system_number"
          />
        </ContentText>
        <ContentText text="تخصص">
          <EditField
            isTransparent={true}
            iconGray={true}
            changeData={changeData}
            data={data?.expertise}
            name="expertise"
          />
        </ContentText>
        <ContentText text="مدرک">
          <AutoCompleteSelect
            updateData={changeData}
            label="انتخاب کنید..."
            name="degree"
            list={degree}
          />
        </ContentText>
        <ContentText text="توضیحات">
          <EditField
            multiline={5}
            placeholder="درباره سوابق خود توضیحاتی بنویسید..."
            isTransparent={true}
            iconGray={true}
            changeData={changeData}
            data={data?.description}
            name="description"
          />
        </ContentText>
        <ContentText text="مهارت ها">
          <EditField
            multiline={5}
            placeholder="مهارت های خود را بنویسید..."
            isTransparent={true}
            iconGray={true}
            changeData={changeData}
            data={data?.skills}
            name="skills"
          />
        </ContentText>
        <ContentText text="جنسیت">
          <RadioGender />
        </ContentText>
        <FieldDate changeListData={changeData} data={data?.time_work} />
      </div>
      <div className="mt-[40px] w-full flex justify-end">
        <Button
          className={`!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
            ${!checkAllValues(data) && "opacity-60"}`}
          onClick={() => setValue((prev) => prev + 1)}
          disabled={!checkAllValues(data)}
          variant="contained"
        >
          ثبت اطلاعات
          <ArrowLeftPA />
        </Button>
      </div>
    </div>
  );
}

export default Form;
