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, auth, returnCodeText } = useWrStore((state) => {
    return state;
  });
  const { laeSeCd } = auth;

  const [useCityCd, setUserCityCd] = useState<SelectDataType[]>([]);
  const [useSggCd, setUserSggCd] = useState<SelectDataType[]>([]);

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

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

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

  useEffect(() => {
    //const bdstInfoSn = form.getValues("bdstInfoSn");
  //  if (bdstInfoSn && bdstInfoSn > 0) form.setValue("daddr", bdstInfoSn);
  }, [form.getValues("bdstInfoSn")]);

  const userCtpvCd = form.watch("ctpvCd");
  const userSggCd = form.watch("sggCd");

  useEffect(() => {
    const city = String(userCtpvCd);

    if (city && (city === "0" || city === "50")) {
      setUserSggCd([{ text: "전체", val: "0" }]);

      form.setValue("sggCd", 0, {
        shouldDirty: true,
        shouldTouch: true,
        shouldValidate: true,
      });
    } else if (city && city.length === 2) {
      const sgg = code.sggCd.filter((item) => item.val.slice(0, 2) === city);
      setUserSggCd(sgg);
      form.setValue("sggCd", Number(sgg[0]?.val), {
        shouldDirty: true,
        shouldTouch: true,
        shouldValidate: true,
      });
    }
  }, [userCtpvCd]);

  useEffect(() => {
    const strCtpvCd = String(userCtpvCd);

    if (strCtpvCd && strCtpvCd !== "0") {
      const city = returnCodeText(strCtpvCd, "cityCd");
    
      form?.setValue("daddr", city);
    } else if (strCtpvCd === "0") {
      form?.setValue("daddr", "");
    }
  }, [userCtpvCd]);

  useEffect(() => {
    const strSggCd = String(userSggCd);
    if (strSggCd && strSggCd !== "0") {
      const city = returnCodeText(strSggCd.slice(0, 2), "cityCd");
      const sgg = returnCodeText(strSggCd, "sggCd");

      form?.setValue("daddr", city + " " + sgg);
    } else if (strSggCd === "0") {
      const ctpvCdText = returnCodeText(
        String(form.getValues("ctpvCd")),
        "cityCd"
      );
      if(ctpvCdText!=='전체')
      form?.setValue("daddr", ctpvCdText);
    }
  }, [userSggCd]);

  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
                  key={`sgg-${String(userCtpvCd)}`}
                  className="col-span-3"
                  label={""}
                  selectClass={selectClass}
                  selectArray={useCityCd}
                  onSelectValue={(val) => {
                    field.onChange(Number(val));
                  }}
                  value={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"
                  key={`sgg-${String(userSggCd)}`}
                  label={""}
                  selectClass={`w-full min-h-[2.9rem] ${selectClass}`}
                  selectArray={useSggCd}
                  onSelectValue={(val) => {
                    field.onChange(Number(val));
                  }}
                  value={field.value??useSggCd[0]?.val}
                />
              </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" ? "건축물 주소" : "시설 주소"}>
                <div>
                  <Input
                    className={selectClass}
                    placeholder="위치를 입력해주세요"
                    type="search"
                    onChange={(e) => {
                      field.onChange(e.target.value);
                    }}
                    value={field.value || ""}
                    maxLength={50}
                  />
                </div>
              </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={
                        type === "RNB" ? code.bdstUsgCd : code.rswtBdstType
                      }
                      onSelectValue={(val) => {
                        field.onChange(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>
        </>
      ) : (
        <></>
      )}
    </>
  );
}