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

type RadioEtcKeys = 'house_structure' | 'rafter_material' | 'waterproof_material' | 'insulation_presence'

const translateJapanese: Record<RadioEtcKeys, string> = {
  house_structure: '住宅構造',
  rafter_material: '垂木材質',
  waterproof_material: '防水材の種類',
  insulation_presence: '断熱材の有無',
}

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: 'あり',
    },
  ],
}

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

  const handleRadioChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    if (column === 'insulation_presence') {
      setIsEtcSelected(value === '2')
      setDetailInfoData({
        ...detailInfoData,
        [column]: Number(value),
      })
    } else if (value === 'etc') {
      setIsEtcSelected(true)
      setDetailInfoData({
        ...detailInfoData,
        [column]: null,
      })
    } else {
      setIsEtcSelected(false)
      setEtcValue('')
      setDetailInfoData({
        ...detailInfoData,
        [column]: Number(value),
        [`${column}_etc`]: null,
      })
    }
  }

  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}
            onChange={handleRadioChange}
            checked={detailInfoData[column] === item.id}
          />
          <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}`} value="etc" onChange={handleRadioChange} />
          <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>
  )
}