"use client";
import { txtSize } from "@/app/store/common/code/basicCode";
import type { customLdrmnt } from "@/app/store/matDmd/ldrmntCoSttn";
import { ldrmntZod } from "@/app/store/matDmd/ldrmntCoSttn/headList";
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { formatCommaNumber, handleCommaNumberChange } from "@/components/lib/func/commom";
import { Form, FormField, FormUi, ScrollArea } from "@common/business_components/ui";
import { Button, Input } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import type { z } from "zod";

export default function CoDetailModal({
  formObj,
  onFormSubmit,
  readonly,
  isMap =false,
}: {
  formObj: any;
  onFormSubmit: (values: customLdrmnt) => void;
  readonly?: boolean;
  isMap?:boolean
}) {
  const defaultValues: z.infer<typeof ldrmntZod> = ldrmntZod.parse({});
  const form = useForm<z.infer<typeof ldrmntZod>>({
    resolver: zodResolver(ldrmntZod),
    defaultValues: defaultValues,
  });

  useEffect(() => {
    if (ldrmntZod) form.reset(formObj);
  }, [formObj]);

  useEffect(() => {
    const male = Number(form.watch("maleEmpCnt") ?? 0);
    const female = Number(form.watch("fmaleEmpCnt") ?? 0);
    const frgnrMale = Number(form.watch("frgnrMaleEmpCnt") ?? 0);
    const frgnrFemale = Number(form.watch("frgnrFmaleEmpCnt") ?? 0);

    const total = male + female + frgnrMale + frgnrFemale;

    form.setValue("totalEmpCnt", total);
  }, [
    form.watch("maleEmpCnt"),
    form.watch("fmaleEmpCnt"),
    form.watch("frgnrMaleEmpCnt"),
    form.watch("frgnrFmaleEmpCnt"),
  ]);

  return (
    <div>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onFormSubmit)}>
          <div className="grid grid-cols-12 items-center card-header">
            <h1 className="text-2xl font-medium text-label col-span-10">
              잠재수요처 상세정보
            </h1>
            {!isMap ? (
              <Button
                type="submit"
                className="col-start-12 col-span-1"
                size={"sm"}
                disabled={readonly}
              >
                저장
              </Button>
            ) : (
              <></>
            )}
          </div>
          <ScrollArea className="h-[79vh] mx-8">
            <FormField
              control={form.control}
              name="fctryMngSn"
              render={({ field }) => (
                <FormUi label="">
                  <Input
                    className={selectClass}
                    placeholder=""
                    type="hidden"
                    value={field.value ?? ""}
                  />
                </FormUi>
              )}
            />
            <div className="grid grid-cols-4 gap-2 mt-4">
              <div className="col-span-2">
                <FormField
                  control={form.control}
                  name="dmdCoNm"
                  render={({ field }) => (
                    <FormUi label="회사명">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-2">
                <FormField
                  control={form.control}
                  name="mngInstNm"
                  render={({ field }) => (
                    <FormUi label="관리기관">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-4 gap-2 mt-4">
              <div className="col-span-2">
                <FormField
                  control={form.control}
                  name="fctrySe"
                  render={({ field }) => (
                    <FormUi label="공장구분">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-2">
                <FormField
                  control={form.control}
                  name="cmpxNm"
                  render={({ field }) => (
                    <FormUi label="단지명">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-12 gap-2 mt-4">
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="fndnSe"
                  render={({ field }) => (
                    <FormUi label="설립구분">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="mvnShp"
                  render={({ field }) => (
                    <FormUi label="입주형태">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="hldSe"
                  render={({ field }) => (
                    <FormUi label="보유구분">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-4 gap-2 mt-4">
              <div className="col-span-2">
                <FormField
                  control={form.control}
                  name="frstAprvYmd"
                  render={({ field }) => (
                    <FormUi label="최초승인일">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-2">
                <FormField
                  control={form.control}
                  name="frstRegYmd"
                  render={({ field }) => (
                    <FormUi label="최초등록일">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-12 gap-2 mt-4">
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="regSe"
                  render={({ field }) => (
                    <FormUi label="등록구분">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="regYmd"
                  render={({ field }) => (
                    <FormUi label="등록일">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="telno"
                  render={({ field }) => (
                    <FormUi label="전화번호">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={13}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-5 gap-2 mt-4">
              <div className="col-span-1">
                <FormField
                  control={form.control}
                  name="maleEmpCnt"
                  render={({ field }) => (
                    <FormUi label="남자종업원">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          // field.onChange(e.target.value);
                          handleCommaNumberChange(e, field.onChange);
                        }}
                        value={formatCommaNumber(field.value)}
                        min={0}
                        maxLength={8}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-1">
                <FormField
                  control={form.control}
                  name="fmaleEmpCnt"
                  render={({ field }) => (
                    <FormUi label="여자종업원">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          handleCommaNumberChange(e, field.onChange);
                        }}
                        value={formatCommaNumber(field.value)}
                        min={0}
                        maxLength={8}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-1">
                <FormField
                  control={form.control}
                  name="frgnrMaleEmpCnt"
                  render={({ field }) => (
                    <FormUi label="외국인남자종업원">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          handleCommaNumberChange(e, field.onChange);
                        }}
                        value={formatCommaNumber(field.value)}
                        min={0}
                        maxLength={8}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-1">
                <FormField
                  control={form.control}
                  name="frgnrFmaleEmpCnt"
                  render={({ field }) => (
                    <FormUi label="외국인여자종업원">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          handleCommaNumberChange(e, field.onChange);
                        }}
                        value={formatCommaNumber(field.value)}
                        min={0}
                        maxLength={8}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-1">
                <FormField
                  control={form.control}
                  name="totalEmpCnt"
                  render={({ field }) => (
                    <FormUi label="종업원합계">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          handleCommaNumberChange(e, field.onChange);
                        }}
                        value={formatCommaNumber(field.value) ?? 0}
                        min={0}
                        readOnly={true}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-12 gap-2 mt-4">
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="prdctnItem"
                  render={({ field }) => (
                    <FormUi label="생산품">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="splyMtrl"
                  render={({ field }) => (
                    <FormUi label="원자재">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="fctryScl"
                  render={({ field }) => (
                    <FormUi label="공장규모">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-12 gap-2 mt-4">
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="usgRgn"
                  render={({ field }) => (
                    <FormUi label="용도지역">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="ldcg"
                  render={({ field }) => (
                    <FormUi label="지목">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="usgRgnArea"
                  render={({ field }) => (
                    <FormUi label="용지면적">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-12 gap-2 mt-4">
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="mnftrFcltArea"
                  render={({ field }) => (
                    <FormUi label="제조시설면적">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="sbsdFcltArea"
                  render={({ field }) => (
                    <FormUi label="부대시설면적">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="archArea"
                  render={({ field }) => (
                    <FormUi label="건축면적">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-12 gap-2 mt-4">
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="knwlIndstCntrNm"
                  render={({ field }) => (
                    <FormUi label="지식산업센터명">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="rprsTpbiz"
                  render={({ field }) => (
                    <FormUi label="대표업종">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="tpbizNm"
                  render={({ field }) => (
                    <FormUi label="업종명">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-12 gap-2 mt-4">
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="tpbizCd"
                  render={({ field }) => (
                    <FormUi label="업종코드">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="cycl"
                  render={({ field }) => (
                    <FormUi label="차수">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-4">
                <FormField
                  control={form.control}
                  name="corpAddr"
                  render={({ field }) => (
                    <FormUi label="법인주소">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-4 gap-2 mt-4">
              <div className="col-span-2">
                <FormField
                  control={form.control}
                  name="esntlIdx"
                  render={({ field }) => (
                    <FormUi label="필지수">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-2">
                <FormField
                  control={form.control}
                  name="fctryMngNo"
                  render={({ field }) => (
                    <FormUi label="공장관리번호">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={txtSize}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
            <div className="grid grid-cols-4 gap-2 mt-4">
              <div className="col-span-2">
                <FormField
                  control={form.control}
                  name="fctryAddr"
                  render={({ field }) => (
                    <FormUi label="공장주소">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={50}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
              <div className="col-span-2">
                <FormField
                  control={form.control}
                  name="fctryLotnoAddr"
                  render={({ field }) => (
                    <FormUi label="공장주소_지번">
                      <Input
                        className={selectClass}
                        placeholder=""
                        type="text"
                        onChange={(e) => {
                          field.onChange(e.target.value);
                        }}
                        value={field.value ?? ""}
                        maxLength={50}
                        readOnly={readonly}
                      />
                    </FormUi>
                  )}
                />
              </div>
            </div>
          </ScrollArea>
        </form>
      </Form>
    </div>
  );
}