import { useQueryClient } from '@tanstack/react-query'
import MarkdownIt from 'markdown-it'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import MdEditor from 'react-markdown-editor-lite'
import { useParams, useNavigate } from 'react-router-dom'

import FieldError from '@/components/common/FieldError'
import FormField from '@/components/common/FormField'
import MainArea from '@/components/layout/MainArea'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiGet, apiPut } from '@/lib/api'
import { wikiKeys } from '@/lib/queryKeys'
import { canEditContent } from '@/lib/users'
import { inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import Forbidden from '@/pages/Forbidden'

import 'react-markdown-editor-lite/lib/index.css'

import type { FC } from 'react'

import type { User, WikiPage } from '@/types'

const mdParser = new MarkdownIt

type Props = { user: User | null }

type WikiFormField = 'title' | 'body'


const WikiEditPage: FC<Props> = ({ user }) => {
  const editable = canEditContent (user)

  const { id } = useParams ()

  const navigate = useNavigate ()

  const qc = useQueryClient ()

  const [body, setBody] = useState ('')
  const [loading, setLoading] = useState (true)
  const [title, setTitle] = useState ('')
  const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
      useValidationErrors<WikiFormField> ()

  const handleSubmit = async () => {
    clearValidationErrors ()

    const formData = new FormData ()
    formData.append ('title', title)
    formData.append ('body', body)

    try
    {
      await apiPut (`/wiki/${ id }`, formData,
		    { headers: { 'Content-Type': 'multipart/form-data' } })
      qc.setQueryData (wikiKeys.show (title, { }),
		       (prev: WikiPage) => ({ ...prev, title, body }))
      qc.invalidateQueries ({ queryKey: wikiKeys.root })
      toast ({ title: '投稿成功!' })
      navigate (`/wiki/${ title }`)
    }
    catch (e)
    {
      applyValidationError (e)
      toast ({ title: '投稿失敗', description: '入力を確認してください。' })
    }
  }

  useEffect (() => {
    if (!(editable))
      return

    void (async () => {
      setLoading (true)
      const data = await apiGet<WikiPage> (`/wiki/${ id }`)
      setTitle (data.title)
      setBody (data.body)
      setLoading (false)
    }) ()
  }, [editable, id])

  if (!(editable))
    return <Forbidden/>

  return (
      <MainArea>
	<Helmet>
	  <title>{`Wiki ページを編輯 | ${ SITE_TITLE }`}</title>
	</Helmet>
	<div className="max-w-xl mx-auto p-4 space-y-4">
	  <h1 className="text-2xl font-bold mb-2">Wiki ページを編輯</h1>

	  {loading ? 'Loading...' : (
	      <>
		<FieldError messages={baseErrors}/>

		{/* タイトル */}
		{/* TODO: タグ補完 */}
		<FormField label="タイトル" messages={fieldErrors.title}>
		  {({ describedBy, invalid }) => (
		      <input type="text"
			     value={title}
			     onChange={e => setTitle (e.target.value)}
			     aria-describedby={describedBy}
			     aria-invalid={invalid}
			     className={inputClass (invalid)}/>)}
		</FormField>

		{/* 本文 */}
		<FormField label="本文" messages={fieldErrors.body}>
		  {() => (
		      <MdEditor value={body}
				style={{ height: '500px' }}
				renderHTML={text => mdParser.render (text)}
				onChange={({ text }) => setBody (text)}/>)}
		</FormField>

		{/* 送信 */}
		<button onClick={handleSubmit}
			className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
		  編輯
		</button>
	      </>)}
	</div>
      </MainArea>)
}

export default WikiEditPage