'use client'

import { useEffect, useState } from 'react'
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 SuitableSearch() {
  const [searchValue, setSearchValue] = useState<string>('')

  const { getSuitableCommCode, clearSuitableStore } = useSuitable()
  const { suitableCommCode, searchCategory, setSearchCategory, setSearchKeyword } = useSuitableStore()

  /* 키워드 입력 글자 제한 */
  const handleInputChange = (value: string) => {
    if (Array.from(value).length > 30) {
      alert('検索ワードは最大30文字まで入力できます。')
      setSearchValue(value.slice(0, 30))
      return
    }
    setSearchValue(value)
  }

  /* 키워드 검색 */
  const handleInputSearch = async () => {
    if (!searchValue.trim()) {
      alert('屋根材の製品名を入力してください。')
      return
    }
    setSearchKeyword(searchValue)
  }

  /* 키워드 초기화 */
  const handleInputClear = () => {
    setSearchValue('')
    clearSuitableStore({ items: true, keyword: true })
  }

  useEffect(() => {
    clearSuitableStore({ items: true, category: true, keyword: true })
    getSuitableCommCode()
  }, [])

  return (
    <>
      <div className="sale-form-bx">
        <select className="select-form" name="" id="" value={searchCategory || ''} onChange={(e) => setSearchCategory(e.target.value)}>
          <option value="">屋根材の種類を選択</option>
          {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.map((category: CommCode, index: number) => (
            <option key={index} value={category.code}>
              {category.codeJp}
            </option>
          ))}
        </select>
      </div>
      <div className="sale-form-bx">
        <div className="search-input">
          <input
            type="text"
            className="search-frame"
            placeholder="製品名を入力"
            value={searchValue}
            onChange={(e) => handleInputChange(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                handleInputSearch()
              }
            }}
          />
          {searchValue && <button className="del-icon" onClick={handleInputClear} />}
          <button className="search-icon" onClick={handleInputSearch} />
        </div>
      </div>
    </>
  )
}