frontend/apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx

import { useWrStore } from "@/app/store";
import { numSize, txtSize } from "@/app/store/common/code/basicCode";
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { formH1Class } from "@/components/lib/class/comClass";
import {
  DatePicker,
  FormField,
  FormUi,
  SelectBox,
  type SelectDataType,
} from "@common/business_components";
import { Input } from "@common/components";
import { useEffect, useState } from "react";

export default function BdstReg({ form, type }: { form: any; type?: string }) {
  const { code } = useWrStore((state) => {
    return state;
  });

  const { userSiSggCd } = code
  const [useCityCd, setUserCityCd] = useState<SelectDataType[]>([])
  const [useSggCd, setUserSggCd] = useState<SelectDataType[]>([])

  // const [selectSgg, setSelectSgg] = useState<SelectDataType[] | undefined>();
  // const [objSearch, setObjSearch] = useState<objSearchType>({
  //   sgg: "",
  //   city: "",
  // });

  useEffect(() => {
    if (userSiSggCd.length === 2 && code.cityCd.length > 0) {
      const city = code.cityCd.filter((item) => item.val === userSiSggCd)
      const sgg = code.sggCd.filter((item) => item.val.slice(0, 2) === userSiSggCd)
      sgg.unshift({ text: '전체', val: '0' })
      setUserCityCd(city) // Fix: Ensure city is of type SelectDataType[]
      setUserSggCd(sgg)
      if (city[0]?.val) {
        // 여기 중요
        queueMicrotask(() => {
          form.setValue("ctpvCd", Number(city[0]?.val), { shouldDirty: true, shouldTouch: true, shouldValidate: true });
        });
      }
    } else if (userSiSggCd.length === 5 && code.cityCd.length > 0 && code.sggCd.length > 0) {
      const city = code.cityCd.filter((item) => item.val === userSiSggCd.slice(0, 2))
      const sgg = code.sggCd.filter((item) => item.val === userSiSggCd)
      setUserSggCd(sgg)
      setUserCityCd(city)
      form.setValue('ctpvCd', Number(city[0]?.val))
      form.setValue('sggCd', Number(sgg[0]?.val))

    }
  }, [form, userSiSggCd, code.cityCd, code.sggCd])



  // useEffect(() => {
  //   const city = form.getValues("ctpvCd");
  //   const sgg = form.getValues("sggCd");
  //   setObjSearch({ city: city, sgg: sgg });
  // }, [selectSgg]);

  useEffect(() => {
    const subscription = form.form?.watch((value: any) => {
      console.log("vale", value);
    });

    return () => subscription?.unsubscribe();
  }, [form.form]);



  useEffect(() => {
    console.log('form.formState ', form.watch("archArea"))
  }, [form.formState])

  return (
    <>
      <h1 className={formH1Class}> {type !== "HTB" ? "건축물 기본 정보" : '시설 기본 정보'}</h1>
      <div className="grid grid-cols-6 gap-2 mt-4">
        <div className="col-span-3">
          <FormField
            control={form.control}
            name="ctpvCd"
            render={({ field }) => (
              <FormUi label="시도">
                <SelectBox
                  className="col-span-3"
                  label={""}
                  selectClass={selectClass}
                  selectArray={useCityCd}
                  onSelectValue={(val) => {
                    field.onChange(Number(val));
                  }}
                  value={typeof field.value !== "undefined" ? field.value : useCityCd[0]?.val}
                />
              </FormUi>
            )}
          />
        </div>
        <div className="col-span-3">
          <FormField
            control={form.control}
            name="sggCd"
            render={({ field }) => (
              <FormUi label="시군구">
                <SelectBox
                  className="col-span-3"
                  label={""}
                  selectClass={`w-full min-h-[2.9rem] ${selectClass}`}
                  selectArray={useSggCd}
                  onSelectValue={(val) => {
                    field.onChange(Number(val));
                  }}
                  value={field.value}
                />
              </FormUi>
            )}
          />
        </div>
      </div>
      <div className="grid grid-cols-6 gap-2 mt-4 ">
        <div className="col-span-2">
          <FormField
            control={form.control}
            name="bdstNm"
            render={({ field }) => (
              <FormUi label={type !== "HTB" ? "건축물명" : '시설명'}>
                <Input
                  className={selectClass}
                  placeholder={type !== "HTB" ? "건축물 명 입력하세요" : '시설명 입력하세요'}
                  type="text"
                  onChange={(e) => {
                    field.onChange(e.target.value)
                  }}
                  value={field.value || ''}
                  maxLength={txtSize}
                />
              </FormUi>
            )}
          />
        </div>
        <div className="col-span-2">
          <FormField
            control={form.control}
            name="daddr"
            render={({ field }) => (
              <FormUi label={type !== "HTB" ? "건축물 주소" : '시설 주소'} >
                <Input
                  className={selectClass}
                  placeholder="위치를 입력해주세요"
                  type="search"
                  onChange={(e) => {
                    field.onChange(e.target.value)
                  }}
                  value={field.value || ''}
                  maxLength={50}
                />
              </FormUi>
            )}
          />
        </div>

        <div className="col-span-2">
          <FormField
            control={form.control}
            name="frstArchPrmsnDt"
            render={({ field }) => (
              <FormUi label={type !== "HTB" ? "최초건축허가일" : '준공년도'} >
                <DatePicker
                  mode={"single"}
                  field={{
                    value: field.value ?? new Date(),
                    onChange: (date: Date | undefined) => field.onChange(date),
                  }}
                  // modifiers={{
                  //   disabled: { after: new Date() }
                  // }} 
                  selectClass={"w-full"}
                ></DatePicker>
              </FormUi>
            )}
          />
        </div>
      </div>

      {type !== "HTB" ? (
        <>
          <div className="grid grid-cols-6 gap-2 mt-4 ">
            <div className="col-span-2">
              <FormField
                control={form.control}
                name="reuseBuilding.0.bdstUsgCd"
                render={({ field }) => (
                  <FormUi label="건축물용도">
                    <SelectBox
                      className={""}
                      selectClass={selectClass}
                      label={""}
                      selectArray={code.bdstUsgCd}
                      onSelectValue={(val) => {
                        field.onChange(Number(val));
                      }}
                      value={field.value ?? code.bdstUsgCd[0]?.val}
                    />
                  </FormUi>
                )}
              />
            </div>

            <div className="col-span-2">
              <FormField
                control={form.control}
                name="archArea"
                render={({ field }) => (
                  <FormUi label="건축면적(m³)">
                    <Input
                      className={selectClass}
                      placeholder="면적을 입력하세요"
                      type="text"
                      onChange={(e) => {
                        field.onChange(e.target.value)
                      }}
                      value={field.value || ''}
                      maxLength={numSize}
                    />
                  </FormUi>
                )}
              />
            </div>
            <div className="col-span-2">
              <FormField
                control={form.control}
                name="reuseBuilding.0.lawTrgtYn"
                render={({ field }) => (
                  <FormUi label="법정의무대상여부">
                    <SelectBox
                      className={""}
                      selectClass={selectClass}
                      label={""}
                      selectArray={code.yn}
                      onSelectValue={(val) => {
                        field.onChange(val);
                      }}
                      value={field.value ?? code.yn[0]?.val}
                    />
                  </FormUi>
                )}
              />
            </div>
          </div>
        </>
      ) : (
        <></>
      )}
    </>
  );
}