'use client'

import { useServey } from '@/hooks/useSurvey'
import { useAddressStore } from '@/store/addressStore'
import { usePopupController } from '@/store/popupController'
import { useState } from 'react'

type Address = {
  address1: string
  address2: string
  address3: string
  kana1: string
  kana2: string
  kana3: string
  prefcode: string
  zipcode: string
}

export default function ZipCodePopup() {
  const [searchValue, setSearchValue] = useState('') //search 데이터 유무
  const [selected, setSelected] = useState('')
  const { setAddressData } = useAddressStore()
  const { getZipCode } = useServey()
  const [addressInfo, setAddressInfo] = useState<Address[] | null>([])

  //search 데이터 value 추가

  const popupController = usePopupController()

  const handleApply = () => {
    console.log(addressInfo?.[0])
    setAddressData({
      post_code: addressInfo?.[0]?.zipcode || '',
      address: addressInfo?.[0]?.address1 || '',
      address_detail: addressInfo?.[0]?.address2 + ' ' + addressInfo?.[0]?.address3 || '',
    })
    popupController.setZipCodePopup(false)
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value)
  }

  const handleSearch = () => {
    const addressData = getZipCode(searchValue)
    addressData.then((address) => {
      if (address) {
        setAddressInfo(address)
      } else {
        setAddressInfo([])
      }
    })
  }
  return (
    <>
      <div className="modal-popup">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <div className="modal-header-inner">
                <div className="modal-name-wrap">
                  <div className="modal-img">
                    <img src="/assets/images/layout/modal_header_icon02.svg" alt="" />
                  </div>
                  <div className="modal-name">住所検索</div>
                </div>
                <button className="modal-close" onClick={() => popupController.setZipCodePopup(false)}></button>
              </div>
            </div>
            <div className="modal-body">
              <div className="zip-code-search-wrap">
                <div className="zip-code-search-input">
                  <div className="search-input">
                    <input type="text" className="search-frame" value={searchValue} placeholder="Search" onChange={handleChange} />
                    {/*input에 데이터 있으면 삭제버튼 보임 */}
                    {searchValue && <button className="del-icon" onClick={() => setSearchValue('')}></button>}
                    <button className="search-icon" onClick={handleSearch}></button>
                  </div>
                </div>
                <div className="zip-code-table-wrap">
                  <div className="zip-code-table-tit">名前</div>
                  <table className="zip-code-table">
                    <thead>
                      <tr>
                        <th>都道府県</th>
                        <th>市区町村</th>
                        <th>市区町村以下</th>
                      </tr>
                    </thead>
                    <tbody>
                      {addressInfo?.map((item, index) => (
                        <tr key={`${item.zipcode}-${index}`} onClick={() => setSelected(item.zipcode)}>
                          <td>{item.address1}</td>
                          <td>{item.address2}</td>
                          <td>{item.address3}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                  <div className="btn-flex-wrap">
                    <div className="btn-bx">
                      <button className="btn-frame red icon" onClick={handleApply}>
                        住所の適用<i className="btn-arr"></i>
                      </button>
                    </div>
                    <div className="btn-bx">
                      <button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(false)}>
                        閉じる<i className="btn-arr"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
