'use client'

import { useEffect, useState } from 'react'
import DetailButton from './DetailButton'
import { SurveyBasicInfo } from '@/types/Survey'

export default function DetailForm({
  surveyDetail,
  isLoadingSurveyDetail,
}: {
  surveyDetail: SurveyBasicInfo | null
  isLoadingSurveyDetail: boolean
}) {
  const [isTemporary, setIsTemporary] = useState(true)

  useEffect(() => {
    if (surveyDetail?.REPRESENTATIVE && surveyDetail?.STORE && surveyDetail?.CONSTRUCTION_POINT) {
      setIsTemporary(false)
    }
  }, [surveyDetail])

  if (isLoadingSurveyDetail) {
    return <div>Loading...</div>
  }
  return (
    <>
      <div className="sale-frame">
        <div className="data-form-wrap">
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">担当者名</div>
            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.REPRESENTATIVE} />
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">販売店</div>
            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.STORE ?? ''} />
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">施工店</div>
            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.CONSTRUCTION_POINT ?? ''} />
          </div>
        </div>
      </div>

      <div className="sale-frame">
        <div className="data-form-wrap">
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">現地調査日</div>
            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.INVESTIGATION_DATE ?? ''} />
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">建物名</div>
            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.BUILDING_NAME ?? ''} />
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">顧客名</div>
            <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.CUSTOMER_NAME ?? ''} />
          </div>
        </div>
        <DetailButton isTemporary={isTemporary} surveyId={Number(surveyDetail?.ID)} representative={surveyDetail?.REPRESENTATIVE ?? ''} />
      </div>
    </>
  )
}