import type { FC } from 'react'

import { useEffect, useState } from 'react'
import { useLocation, useParams } from 'react-router-dom'

import { useLocale } from '@/lib/useLocale'
import { useUITranslation } from '@/lib/useUITranslation'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import PageHead from '@/components/common/PageHead'
import { apiGet } from '@/lib/api'
import { cn } from '@/lib/utils'

import type { WikiPageDiff } from '@/types'


const WikiDiffPage: FC = () => {
  const { message, label } = useUITranslation ('wiki')
  const locale = useLocale ()
  const { id } = useParams ()

  const location = useLocation ()

  const [diff, setDiff] = useState<WikiPageDiff | null> (null)

  const query = new URLSearchParams (location.search)
  const from = query.get ('from')
  const to = query.get ('to')
  const displayTitle = diff
      ? `${ diff.title }${ diff.deprecatedAt != null
	  ? message ('shared:labels.deprecatedSuffix').text : '' }`
      : ''

  useEffect (() => {
    void (async () => {
      setDiff (await apiGet<WikiPageDiff> (`/wiki/${ id }/diff`, { locale, params: { from, to } }))
    }) ()
  }, [from, id, to, locale])

  return (
      <MainArea>
	<PageHead title={message ('diffTitle', { title: displayTitle })}/>
	<PageTitle>{displayTitle}</PageTitle>
	<div className="prose mx-auto p-4">
	  {diff
	   ? (
	      diff.diff.map (d => (
		  <p className={cn (d.type === 'added' && 'bg-green-200 dark:bg-green-800',
				    d.type === 'removed' && 'bg-red-200 dark:bg-red-800')}>
		    {d.content}
		  </p>)))
	   : label ('common:loading')}
	</div>
      </MainArea>)
}

export default WikiDiffPage