onsitesurvey/src/components/survey-sale/detail/DetailForm.tsx

'use client'

import type { Mode, SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'
import { useEffect, useState } from 'react'
import ButtonForm from './ButtonForm'
import BasicForm from './BasicForm'
import RoofForm from './RoofForm'
import { useParams, useSearchParams } from 'next/navigation'
import { useSurvey } from '@/hooks/useSurvey'

const roofInfoForm: SurveyDetailRequest = {
  contractCapacity: null,
  retailCompany: null,
  supplementaryFacilities: null,
  supplementaryFacilitiesEtc: null,
  installationSystem: null,
  installationSystemEtc: null,
  constructionYear: null,
  constructionYearEtc: null,
  roofMaterial: null,
  roofMaterialEtc: null,
  roofShape: null,
  roofShapeEtc: null,
  roofSlope: null,
  houseStructure: '1',
  houseStructureEtc: null,
  rafterMaterial: '1',
  rafterMaterialEtc: null,
  rafterSize: null,
  rafterSizeEtc: null,
  rafterPitch: null,
  rafterPitchEtc: null,
  rafterDirection: '1',
  openFieldPlateKind: null,
  openFieldPlateKindEtc: null,
  openFieldPlateThickness: null,
  leakTrace: false,
  waterproofMaterial: null,
  waterproofMaterialEtc: null,
  insulationPresence: '1',
  insulationPresenceEtc: null,
  structureOrder: null,
  structureOrderEtc: null,
  installationAvailability: null,
  installationAvailabilityEtc: null,
  memo: null,
}

const basicInfoForm: SurveyBasicRequest = {
  representative: '',
  representativeId: null,
  store: null,
  storeId: null,
  constructionPoint: null,
  constructionPointId: null,
  investigationDate: new Date().toLocaleDateString('en-CA'),
  buildingName: null,
  customerName: null,
  postCode: null,
  address: null,
  addressDetail: null,
  submissionStatus: false,
  submissionDate: null,
  submissionTargetId: null,
  submissionTargetNm: null,
  srlNo: null,
}

export default function DetailForm() {
  const idParam = useSearchParams().get('id')
  const routeId = useParams().id

  const modeset = Number(routeId) ? 'READ' : idParam ? 'EDIT' : 'CREATE'
  const id = Number(routeId) ? Number(routeId) : Number(idParam)

  const { surveyDetail, validateSurveyDetail } = useSurvey(Number(id))

  const [mode, setMode] = useState<Mode>(modeset)
  const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(basicInfoForm)
  const [roofInfoData, setRoofInfoData] = useState<SurveyDetailRequest>(roofInfoForm)

  useEffect(() => {
    if (Number(idParam) !== 0 || surveyDetail === null) {
      alert('データが見つかりません。')
      window.location.href = '/survey-sale'
    }
    if (surveyDetail && (mode === 'EDIT' || mode === 'READ')) {
      const { id, uptDt, regDt, detailInfo, ...rest } = surveyDetail
      setBasicInfoData(rest)
      if (detailInfo) {
        const { id, uptDt, regDt, basicInfoId, ...rest } = detailInfo
        setRoofInfoData(rest)
        if (validateSurveyDetail(rest).trim() !== '') {
        }
      }
    }
  }, [surveyDetail, id])

  const data = {
    basic: basicInfoData,
    roof: roofInfoData,
  }

  const buttonFormProps = { mode, setMode, data }

  return (
    <>
      <div className="sale-detail-toggle-wrap">
        {/* 기본정보 */}
        <BasicForm basicInfo={basicInfoData} setBasicInfo={setBasicInfoData} mode={mode} />
        {/* 전기/지붕정보 */}
        <RoofForm roofInfo={roofInfoData} setRoofInfo={setRoofInfoData} mode={mode} />
        <ButtonForm {...buttonFormProps} />
      </div>
    </>
  )
}