'use client'

import Image from 'next/image'
import { useEffect, useState } from 'react'
import SuitableList from './SuitableList'
import { useSuitable } from '@/hooks/useSuitable'
import { useSuitableStore } from '@/store/useSuitableStore'
import type { CommCode } from '@/types/CommCode'
import { SUITABLE_HEAD_CODE } from '@/types/Suitable'

export default function Suitable() {
  const [reference, setReference] = useState(true)

  const { getSuitableCommCode, refetchBySearch } = useSuitable()
  const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()

  const handleInputSearch = async () => {
    if (!searchValue.trim()) {
      alert('屋根材の製品名を入力してください。')
      return
    }
    setIsSearch(true)
    refetchBySearch()
  }

  const handleInputClear = () => {
    setSearchValue('')
    setIsSearch(false)
    refetchBySearch()
  }

  useEffect(() => {
    refetchBySearch()
  }, [selectedCategory])

  useEffect(() => {
    getSuitableCommCode()
    return () => {
      setSelectedCategory('')
      setSearchValue('')
      clearSelectedItems()
    }
  }, [])

  return (
    <div className="border-frame">
      <div className="sale-form-bx">
        <select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
          <option value="">屋根材を選択してください.</option>
          {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MT_CD)?.map((category: CommCode, index: number) => (
            <option key={index} value={category.CODE}>
              {category.CODE_JP}
            </option>
          ))}
        </select>
      </div>
      <div className="sale-form-bx">
        <div className="search-input">
          <input
            type="text"
            className="search-frame"
            placeholder="屋根材 製品名を入力してください."
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
          />
          {searchValue && <button className="del-icon" onClick={handleInputClear} />}
          <button className="search-icon" onClick={handleInputSearch} />
        </div>
      </div>
      <div className="compliance-check-wrap">
        <div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
          <div className="check-name-wrap">
            <div className="check-name">凡例</div>
            <div className="check-name-btn">
              <button className="bx-btn" onClick={() => setReference(!reference)}></button>
            </div>
          </div>
          <ul className="reference-list">
            <li className="reference-item">
              <div className="reference-item-bx">
                <div className="compliance-icon">
                  <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
                </div>
                <span>設置可能</span>
              </div>
            </li>
            <li className="reference-item">
              <div className="reference-item-bx">
                <div className="compliance-icon">
                  <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
                </div>
                <span>設置不可</span>
              </div>
            </li>
            <li className="reference-item">
              <div className="reference-item-bx">
                <div className="compliance-icon">
                  <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
                </div>
                <span>お問い合わせ</span>
              </div>
            </li>
            <li className="reference-item">
              <div className="reference-item-bx">
                <div className="compliance-icon">
                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
                </div>
                <span>備考</span>
              </div>
            </li>
          </ul>
        </div>
        <SuitableList />
      </div>
    </div>
  )
}