import { useState, useEffect, useContext } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { useRecoilValue } from 'recoil'
import { isEmptyArray } from '@/util/common-utils'
import { useSwal } from '@/hooks/useSwal'
import { QcastContext } from '@/app/QcastProvider'

export default function WindSelectPop(props) {
  const globalLocaleState = useRecoilValue(globalLocaleStore)
  const { promiseGet } = useAxios(globalLocaleState)
  const [windSpeedList, setWindSpeedList] = useState([])
  const [windSpeed, setWindSpeed] = useState(null)
  const { getMessage } = useMessage()
  const { swalFire } = useSwal()
  const { setIsGlobalLoading } = useContext(QcastContext)
  //선택한 라디오 값 세팅
  const handleChangeRadio = (e) => {
    setWindSpeed(e.target.value)
  }

  //적용
  const applyWindSpeed = () => {
    if (windSpeed == null) {
      swalFire({ text: getMessage('stuff.windSelectPopup.error.message2'), type: 'alert', icon: 'warning' })
    } else {
      props.windSpeedInfo({ windSpeed: windSpeed })

      //팝업닫기
      props.setShowWindSpeedButtonValid(false)
    }
  }

  useEffect(() => {
    setIsGlobalLoading(true)
    if (props.prefName !== '') {
      promiseGet({ url: `/api/object/windSpeed/${props.prefName}/list` }).then((res) => {
        if (res.status === 200) {
          setIsGlobalLoading(false)
          if (!isEmptyArray(res.data)) {
            setWindSpeedList(res.data)
          }
        }
      })
    } else {
      setIsGlobalLoading(false)
    }
    setIsGlobalLoading(false)
  }, [props])

  return (
    <div className="modal-popup">
      <div className="modal-dialog middle">
        <div className="modal-content">
          <div className="modal-header">
            <h1 className="title">{getMessage('stuff.windSelectPopup.title')}</h1>
            <button className="modal-close" onClick={() => props.setShowWindSpeedButtonValid(false)}>
              닫기
            </button>
          </div>
          <div className="modal-body">
            <div className="modal-body-inner">
              <div className="common-table">
                <table>
                  <colgroup>
                    <col style={{ width: '70px' }} />
                    <col />
                  </colgroup>
                  <tbody>
                    <tr>
                      <th>{getMessage('stuff.windSelectPopup.search.address1')}</th>
                      <td>
                        <div className="input-wrap">
                          <input type="text" className="input-light" defaultValue={props.prefName} readOnly />
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div className="wind-table">
                <table>
                  <thead>
                    <tr>
                      <th style={{ width: '50px' }}>{getMessage('stuff.windSelectPopup.table.selected')}</th>
                      <th style={{ width: '110px' }}>{getMessage('stuff.windSelectPopup.table.windspeed')}</th>
                      <th>Remarks</th>
                    </tr>
                  </thead>
                  <tbody>
                    {windSpeedList.map((row, index) => {
                      return (
                        <tr key={index}>
                          <td className="al-c">
                            <div className="d-check-radio light no-text">
                              <input
                                type="radio"
                                value={row.standardWindSpeedId}
                                name="windS"
                                id={row.standardWindSpeedId}
                                onChange={handleChangeRadio}
                              />
                              <label htmlFor={row.standardWindSpeedId}></label>
                            </div>
                          </td>
                          <td className="al-c">{row.standardWindSpeedId.slice(3)}</td>
                          <td>{row.remarks}</td>
                        </tr>
                      )
                    })}
                  </tbody>
                </table>
              </div>
            </div>
            <div className="footer-btn-wrap">
              <button className="btn-origin navy mr5" onClick={applyWindSpeed}>
                {getMessage('stuff.windSelectPopup.btn2')}
              </button>
              <button className="btn-origin grey" onClick={() => props.setShowWindSpeedButtonValid(false)}>
                {getMessage('stuff.windSelectPopup.btn1')}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}