'use client'

import { useEffect, useState } from 'react'
import { useSurveySaleTabState } from '@/store/surveySaleTabState'
import { SurveyBasicInfo } from '@/types/Survey'
import { Mode } from 'fs'

export default function BasicForm(props: {
  surveyInfo: Partial<SurveyBasicInfo>
  setSurveyInfo: (surveyInfo: Partial<SurveyBasicInfo>) => void
  mode: Mode
}) {
  const { surveyInfo, setSurveyInfo, mode } = props
  const { setBasicInfoSelected } = useSurveySaleTabState()
  const [isFlip, setIsFlip] = useState<boolean>(true)

  useEffect(() => {
    setBasicInfoSelected()
  }, [])

  return (
    <>
      <div className={`sale-detail-toggle-bx ${isFlip ? 'act' : ''}`}>
        <div className="sale-detail-toggle-head" onClick={() => setIsFlip(!isFlip)}>
          <div className="sale-detail-toggle-name">基本情報</div>
          <div className="sale-detail-toggle-btn-wrap">
            <button className="sale-detail-toggle-btn"></button>
          </div>
        </div>
        <div className="sale-detail-toggle-cont">
          <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"
                  readOnly={mode === 'READ'}
                  value={surveyInfo?.REPRESENTATIVE}
                  onChange={(e) => setSurveyInfo({ ...surveyInfo, REPRESENTATIVE: e.target.value })}
                />
              </div>
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">販売店</div>
                <input
                  type="text"
                  className="input-frame"
                  readOnly={mode === 'READ'}
                  value={surveyInfo?.BUILDING_NAME ?? ''}
                  onChange={(e) => setSurveyInfo({ ...surveyInfo, BUILDING_NAME: e.target.value })}
                />
              </div>
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">施工店</div>
                <input
                  type="text"
                  className="input-frame"
                  readOnly={mode === 'READ'}
                  value={surveyInfo?.CONSTRUCTION_POINT ?? ''}
                  onChange={(e) => setSurveyInfo({ ...surveyInfo, CONSTRUCTION_POINT: e.target.value })}
                />
              </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>
                {['CREATE', 'EDIT'].includes(mode as 'CREATE' | 'EDIT') ? (
                  <div className="date-input">
                    <button className="date-btn">
                      <i className="date-icon"></i>
                    </button>
                    <input type="text" className="date-frame" readOnly defaultValue={surveyInfo?.INVESTIGATION_DATE?.toString()} />
                  </div>
                ) : (
                  <input type="text" className="input-frame" disabled defaultValue={surveyInfo?.INVESTIGATION_DATE?.toString()} />
                )}
              </div>
              <div className="data-input-form-bx">
                {/* 건물명 */}
                <div className="data-input-form-tit">建物名</div>
                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.BUILDING_NAME ?? ''} />
              </div>
              <div className="data-input-form-bx">
                {/* 고객명 */}
                <div className="data-input-form-tit">建物名</div>
                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.CUSTOMER_NAME ?? ''} />
              </div>
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">郵便番号/都道府県</div>
                <div className="form-flex">
                  {/* 우편번호 */}
                  <div className="form-bx">
                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.POST_CODE ?? ''} disabled />
                  </div>
                  {/* 도도부현 */}
                  <div className="form-bx">
                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.ADDRESS ?? ''} disabled />
                  </div>
                </div>
                {/* 주소 */}
                <div className="data-input mt5">
                  <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={'浜松浜松町'} disabled />
                </div>
                <div className="form-btn">
                  <button className="btn-frame n-blue icon">
                    郵便番号<i className="btn-arr"></i>
                  </button>
                </div>
              </div>

              <div className="data-input-form-bx">
                <div className="data-input-form-tit">市区町村名, 以後の住所</div>
                <input type="text" className="input-frame" defaultValue={'浜松 浜松町'} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}