'use client'
import { useEffect, useState } from 'react'
import { SurveyDetailRequest } from '@/types/Survey'

type RadioEtcKeys = 'HOUSE_STRUCTURE' | 'RAFTER_MATERIAL' | 'WATERPROOF_MATERIAL' | 'INSULATION_PRESENCE' | 'RAFTER_DIRECTION' | 'LEAK_TRACE'

const translateJapanese: Record<RadioEtcKeys, string> = {
  HOUSE_STRUCTURE: '住宅構造',
  RAFTER_MATERIAL: '垂木材質',
  WATERPROOF_MATERIAL: '防水材の種類',
  INSULATION_PRESENCE: '断熱材の有無',
  RAFTER_DIRECTION: '垂木の方向',
  LEAK_TRACE: '水漏れの痕跡',
}

export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
  HOUSE_STRUCTURE: [
    {
      id: 1,
      label: '木製',
    },
  ],
  RAFTER_MATERIAL: [
    {
      id: 1,
      label: '木製',
    },
    {
      id: 2,
      label: '強制',
    },
  ],
  WATERPROOF_MATERIAL: [
    {
      id: 1,
      label: 'アスファルト屋根940（22kg以上）',
    },
  ],
  INSULATION_PRESENCE: [
    {
      id: 1,
      label: 'なし',
    },
    {
      id: 2,
      label: 'あり',
    },
  ],
  RAFTER_DIRECTION: [
    {
      id: 1,
      label: '垂直垂木',
    },
    {
      id: 2,
      label: '水平垂木',
    },
  ],
  LEAK_TRACE: [
    {
      id: 1,
      label: 'あり',
    },
    {
      id: 2,
      label: 'なし',
    },
  ],
}

export default function RadioEtc({
  column,
  setDetailInfoData,
  detailInfoData,
}: {
  column: RadioEtcKeys
  setDetailInfoData: (data: any) => void
  detailInfoData: SurveyDetailRequest
}) {
  const [isEtcSelected, setIsEtcSelected] = useState(false)
  const [etcValue, setEtcValue] = useState('')

  useEffect(() => {
    if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
      setIsEtcSelected(true)
      setEtcValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
    }
  }, [detailInfoData])

  const handleRadioChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // const value = e.target.value
    // if (column === 'INSULATION_PRESENCE') {
    //   setIsEtcSelected(value === '2')
    //   setDetailInfoData({
    //     ...detailInfoData,
    //     [column]: value,
    //   })
    // } else if (value === 'etc') {
    //   setIsEtcSelected(true)
    //   setDetailInfoData({
    //     ...detailInfoData,
    //     [column]: null,
    //   })
    // } else {
    //   setIsEtcSelected(false)
    //   setEtcValue('')
    //   setDetailInfoData({
    //     ...detailInfoData,
    //     [column]: value,
    //     [`${column}_ETC`]: null,
    //   })
    // }
    const value = e.target.value
    const isSpecialCase = column === 'INSULATION_PRESENCE'
    const isEtc = value === 'etc'
    const isSpecialEtc = isSpecialCase && value === '2'

    const updatedData: typeof detailInfoData = {
      ...detailInfoData,
      [column]: isEtc ? null : value,
      [`${column}_ETC`]: isEtc ? '' : null,
    }

    if (isSpecialEtc) {
      updatedData[column] = value
    }

    setIsEtcSelected(isEtc || isSpecialEtc)
    if (!isEtc) setEtcValue('')
    setDetailInfoData(updatedData)
  }

  const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    setEtcValue(value)
    setDetailInfoData({
      ...detailInfoData,
      [`${column}_ETC`]: value,
    })
  }

  return (
    <div className="data-input-form-bx">
      <div className="data-input-form-tit red-f">{translateJapanese[column]}</div>
      {radioEtcData[column].map((item) => (
        <div className="radio-form-box mb10" key={item.id}>
          <input
            type="radio"
            name={column}
            id={`${column}_${item.id}`}
            value={item.id.toString()}
            onChange={handleRadioChange}
            checked={detailInfoData[column] === item.id.toString()}
          />
          <label htmlFor={`${column}_${item.id}`}>{item.label}</label>
        </div>
      ))}
      {column !== 'INSULATION_PRESENCE' && (
        <div className="radio-form-box mb10">
          <input type="radio" name={column} id={`${column}_ETC`} value="etc" onChange={handleRadioChange} checked={isEtcSelected} />
          <label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
        </div>
      )}
      <div className="data-input">
        <input
          type="text"
          className="input-frame"
          disabled={column === 'INSULATION_PRESENCE' ? !isEtcSelected : !isEtcSelected}
          value={etcValue}
          onChange={handleEtcInputChange}
        />
      </div>
    </div>
  )
}