'use client'

import { SEARCH_OPTIONS, SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS, useSurveyFilterStore } from '@/store/surveyFilterStore'
import { useRouter } from 'next/navigation'
import { useState } from 'react'

export default function SearchForm({ memberRole, userId }: { memberRole: string; userId: string }) {
  const router = useRouter()
  const { setSearchOption, setSort, setIsMySurvey, setKeyword, reset, isMySurvey, keyword, searchOption, sort, setOffset } = useSurveyFilterStore()
  const [searchKeyword, setSearchKeyword] = useState(keyword)
  const [option, setOption] = useState(searchOption)

  const handleSearch = () => {
    if (option !== 'id' && searchKeyword.trim().length < 2) {
      alert('2文字以上入力してください')
      return
    }
    reset()
    setKeyword(searchKeyword)
    setSearchOption(option)
  }
  const searchOptions = memberRole === 'Partner' ? SEARCH_OPTIONS_PARTNERS : SEARCH_OPTIONS

  return (
    <div className="sale-frame">
      <div className="sale-form-bx">
        <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale/regist')}>
          新規売買登録<i className="btn-arr"></i>
        </button>
      </div>
      <div className="sale-form-bx">
        <select
          className="select-form"
          name="search-option"
          id="search-option"
          value={option}
          onChange={(e) => {
            if (e.target.value === 'all') {
              setKeyword('')
              setSearchKeyword('')
              setSearchOption('all')
              setOption('all')
            } else {
              setOption(e.target.value as SEARCH_OPTIONS_ENUM)
            }
          }}
        >
          {searchOptions.map((option) => (
            <option key={option.id} value={option.id}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div className="sale-form-bx">
        <div className="search-input">
          <input
            type="text"
            className="search-frame"
            value={searchKeyword}
            placeholder="タイトルを入力してください. (2文字以上)"
            onChange={(e) => {
              if (e.target.value.length > 30) {
                alert('30文字以内で入力してください')
                return
              }
              setSearchKeyword(e.target.value)
            }}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                handleSearch()
              }
            }}
          />
          <button className="search-icon" onClick={handleSearch}></button>
        </div>
      </div>
      <div className="sale-form-bx">
        <div className="check-form-box">
          <input
            type="checkbox"
            id="ch01"
            checked={isMySurvey === userId}
            onChange={() => {
              setOffset(0)
              setIsMySurvey(isMySurvey === userId ? null : userId)
            }}
          />
          <label htmlFor="ch01">私が書いた物件</label>
        </div>
      </div>
      <div className="sale-form-bx">
        <select
          className="select-form"
          name="sort-option"
          id="sort-option"
          value={sort}
          onChange={(e) => {
            setOffset(0)
            setSort(e.target.value as 'created' | 'updated')
          }}
        >
          <option value="created">最近の登録日</option>
          <option value="updated">最新の更新日</option>
        </select>
      </div>
    </div>
  )
}