import { useEffect, useState } from 'react'
import { useQuery } from '@tanstack/react-query'

import { useLocale } from '@/lib/useLocale'
import { useUITranslation } from '@/lib/useUITranslation'
import PrefetchLink from '@/components/PrefetchLink'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import PageHead from '@/components/common/PageHead'
import { apiGet } from '@/lib/api'
import { wikiKeys } from '@/lib/queryKeys'
import { dateString, inputClass } from '@/lib/utils'

import type { FormEvent , FC } from 'react'

import type { WikiPage } from '@/types'


const WikiSearchPage: FC = () => {
  const { message, label } = useUITranslation ('shared')
  const locale = useLocale ()
  const [title, setTitle] = useState ('')
  const [text, setText] = useState ('')
  const [submittedTitle, setSubmittedTitle] = useState ('')
  const { data: results = [], refetch } = useQuery ({
      queryKey: wikiKeys.index ({ title: submittedTitle }, locale),
      queryFn: () => apiGet<WikiPage[]> ('/wiki', {
	  locale, params: { title: submittedTitle } }) })

  const handleSearch = (ev: FormEvent) => {
    ev.preventDefault ()
    if (submittedTitle === title)
      void refetch ()
    else
      setSubmittedTitle (title)
  }

  useEffect (() => {
    setSubmittedTitle ('')
  }, [locale])

  return (
      <MainArea>
	<PageHead title={message ('navigation:wiki')}/>

	<div className="max-w-xl">
	  <PageTitle>{label ('navigation:wiki')}</PageTitle>
	  <form onSubmit={handleSearch} className="space-y-2">
	    {/* タイトル */}
	    <FormField label={label ('labels.title')}>
	      {({ invalid }) => (
		  <input type="text"
			 value={title}
			 onChange={e => setTitle (e.target.value)}
			 className={inputClass (invalid)}/>)}
	    </FormField>

	    {/* 内容 */}
	    <FormField label={label ('labels.content')}>
	      {({ invalid }) => (
		  <input type="text"
			 value={text}
			 onChange={e => setText (e.target.value)}
			 className={inputClass (invalid)}/>)}
	    </FormField>

	    {/* 検索 */}
	    <div className="py-3">
	      <button type="submit"
		      className="bg-blue-500 text-white px-4 py-2 rounded">
		{label ('common:search')}
	      </button>
	    </div>
	  </form>
	</div>

	<div className="mt-4">
	  <table className="table-auto w-full border-collapse">
	    <thead className="border-b-2 border-black dark:border-white">
	      <tr>
		<th className="p-2 text-left">{label ('labels.title')}</th>
		<th className="p-2 text-left">{label ('labels.lastUpdated')}</th>
	      </tr>
	    </thead>
	    <tbody>
	      {results.map (page => (
		  <tr key={`${ page.resourceType }:${ page.id }`}
		      className="even:bg-gray-100 dark:even:bg-gray-700">
		    <td className="p-2">
		      <PrefetchLink to={`/wiki/${ encodeURIComponent (page.title) }`}>
			{page.title}
		      </PrefetchLink>
		      {page.deprecatedAt != null && label ('labels.deprecatedSuffix')}
		    </td>
		    <td className="p-2">
		      {dateString (page.updatedAt)}
		    </td>
		  </tr>))}
	    </tbody>
	  </table>
	</div>
      </MainArea>)
}

export default WikiSearchPage