import { SurveyBasicInfo, SurveyDetailInfo } from '@/types/Survey'
import DetailButton from './detailButton'
import { roof_material, supplementary_facilities } from '../form/etcProcess/MultiCheckEtc'
import { selectBoxOptions } from '../form/etcProcess/SelectBoxEtc'
import { radioEtcData } from '../form/etcProcess/RadioEtc'

export default function RoofDetailForm({
  surveyDetail,
  isLoadingSurveyDetail,
}: {
  surveyDetail: SurveyBasicInfo | null
  isLoadingSurveyDetail: boolean
}) {
  console.log(surveyDetail)

  const makeNumArr = (value: string) => {
    return value
      .split(',')
      .map((v) => v.trim())
      .filter((v) => v.length > 0)
  }

  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 className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.CONTRACT_CAPACITY ?? ''} />
          </div>
          {/* 전기 소매 회사 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">電気小売会社</div>
            <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.RETAIL_COMPANY ?? ''} />
          </div>
          {/* 전기 부대 설비 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">電気附属設備</div>
            <div className="data-check-wrap">
              {supplementary_facilities.map((item) => (
                <div className="check-form-box" key={item.id}>
                  <input
                    type="checkbox"
                    id={`${item.id}`}
                    checked={makeNumArr(surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES ?? '').includes(String(item.id))}
                    readOnly
                  />
                  <label htmlFor={`${item.id}`}>{item.name}</label>
                </div>
              ))}
              <div className="check-form-box">
                <input
                  type="checkbox"
                  id={`supplementary_facilities_etc`}
                  checked={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC !== null}
                  readOnly
                />
                <label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
              </div>
            </div>
            <div className="data-input">
              <input
                type="text"
                className="input-frame"
                placeholder="-"
                readOnly
                value={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC ?? ''}
              />
            </div>
          </div>
          {/* 설치 희망 시스템 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">設置希望システム</div>
            <SelectedBox column="INSTALLATION_SYSTEM" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 건축 연수 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">建築年数</div>
            <SelectedBox column="CONSTRUCTION_YEAR" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 지붕재 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">屋根材</div>
            <div className="data-check-wrap">
              {roof_material.map((item) => (
                <div className="check-form-box" key={item.id}>
                  <input
                    type="checkbox"
                    id={`${item.id}`}
                    checked={makeNumArr(surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL ?? '').includes(String(item.id))}
                    readOnly
                  />
                  <label htmlFor={`${item.id}`}>{item.name}</label>
                </div>
              ))}
              <div className="check-form-box">
                <input type="checkbox" id={`roof_material_etc`} checked={surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL_ETC !== null} readOnly />
                <label htmlFor={`roof_material_etc`}>その他 (直接入力)</label>
              </div>
            </div>
            <div className="data-input">
              <input type="text" className="input-frame" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL_ETC ?? ''} />
            </div>
          </div>
          {/* 지붕 모양 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">屋根の形状</div>
            <SelectedBox column="ROOF_SHAPE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 지붕 경사도 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">屋根の斜面</div>
            <div className="data-input flex">
              <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.ROOF_SLOPE ?? ''} />
              <span>寸</span>
            </div>
          </div>
          {/* 주택 구조 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">住宅構造</div>
            <RadioSelected column="HOUSE_STRUCTURE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 서까래 재질 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">垂木の材質</div>
            <RadioSelected column="RAFTER_MATERIAL" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 서까래 크기 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">垂木の大きさ</div>
            <SelectedBox column="RAFTER_SIZE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 서까래 피치 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">垂木のピッチ</div>
            <SelectedBox column="RAFTER_PITCH" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 서까래 방향 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">垂木の方向</div>
            <RadioSelected column="RAFTER_DIRECTION" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 노지판 종류 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">路地板の種類</div>
            <SelectedBox column="OPEN_FIELD_PLATE_KIND" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 노지판 두께 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">路地板厚</div>
            <div className="data-input flex">
              <input
                className="input-frame"
                type="text"
                placeholder="-"
                readOnly
                value={surveyDetail?.DETAIL_INFO?.OPEN_FIELD_PLATE_THICKNESS ?? ''}
              />
              <span>mm</span>
            </div>
          </div>
          {/* 누수 흔적 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">水漏れの痕跡</div>
            <RadioSelected column="LEAK_TRACE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 방수재 종류 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">防水材の種類</div>
            <RadioSelected column="WATERPROOF_MATERIAL" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 단열재 유무 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">断熱材の有無</div>
            <RadioSelected column="INSULATION_PRESENCE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 구조 순서 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">屋根構造の順序</div>
            <SelectedBox column="STRUCTURE_ORDER" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 설치 가능 여부 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">設置可能な場合</div>
            <SelectedBox column="INSTALLATION_AVAILABILITY" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
          </div>
          {/* 메모 */}
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">メモ</div>
            <div className="data-input">
              <textarea className="textarea-form" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.MEMO ?? ''} />
            </div>
          </div>
        </div>
        <DetailButton surveyDetail={surveyDetail} />
      </div>
    </>
  )
}

const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
  const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
  const etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]

  return (
    <>
      <select className="select-form mb10" name={column} id={column} disabled value={selectedId ? 'selected' : etcValue ? 'etc' : ''}>
        <option value="">-</option>
        <option value="etc">その他 (直接入力)</option>
        <option value="selected">{selectBoxOptions[column as keyof typeof selectBoxOptions][Number(selectedId)]?.name}</option>
      </select>
      {etcValue && <input type="text" className="input-frame" readOnly value={etcValue.toString()} />}
    </>
  )
}

const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
  let selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
  if (column === 'LEAK_TRACE') {
    selectedId = Number(selectedId)
    if (!selectedId) selectedId = 2
  }

  let etcValue = null
  if (column !== 'RAFTER_DIRECTION') {
    etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
  }
  const etcChecked = etcValue !== null && etcValue !== undefined && etcValue !== ''

  console.log('column: selectedId', column, selectedId)
  return (
    <>
      {radioEtcData[column as keyof typeof radioEtcData].map((item) => (
        <div className="radio-form-box mb10" key={item.id}>
          <input type="radio" name={column} id={`${item.id}`} disabled checked={Number(selectedId) === item.id} />
          <label htmlFor={`${item.id}`}>{item.label}</label>
        </div>
      ))}
      {column !== 'RAFTER_DIRECTION' && column !== 'LEAK_TRACE' && column !== 'INSULATION_PRESENCE' && (
        <div className="radio-form-box mb10">
          <input type="radio" name={column} id={`${column}_ETC`} value="etc" disabled checked={etcChecked} />
          <label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
        </div>
      )}
      {etcChecked && (
        <div className="data-input">
          <input type="text" className="input-frame" placeholder="-" readOnly value={etcValue?.toString() ?? ''} />
        </div>
      )}
    </>
  )
}