import axios from 'axios'
import toCamel from 'camelcase-keys'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { Link, useLocation } from 'react-router-dom'

import TagLink from '@/components/TagLink'
import PageTitle from '@/components/common/PageTitle'
import Pagination from '@/components/common/Pagination'
import MainArea from '@/components/layout/MainArea'
import { API_BASE_URL, SITE_TITLE } from '@/config'

import type { FC } from 'react'

import type { PostTagChange } from '@/types'


export default (() => {
  const [changes, setChanges] = useState<PostTagChange[]> ([])
  const [totalPages, setTotalPages] = useState<number> (0)

  const location = useLocation ()
  const query = new URLSearchParams (location.search)
  const id = query.get ('id')
  const page = Number (query.get ('page') ?? 1)
  const limit = Number (query.get ('limit') ?? 20)

  // 投稿列の結合で使用
  let rowsCnt: number

  useEffect (() => {
    void (async () => {
      const res = await axios.get (`${ API_BASE_URL }/posts/changes`,
				   { params: { ...(id && { id }), page, limit } })
      const data = toCamel (res.data as any, { deep: true }) as {
	  changes:  PostTagChange[]
	  count:    number }
      setChanges (data.changes)
      setTotalPages (Math.ceil (data.count / limit))
    }) ()
  }, [id, page, limit])

  return (
      <MainArea>
	<Helmet>
	  <title>{`耕作履歴 | ${ SITE_TITLE }`}</title>
	</Helmet>

	<PageTitle>
	  耕作履歴
	  {id && <>: 投稿 {<Link to={`/posts/${ id }`}>#{id}</Link>}</>}
	</PageTitle>

	<table className="table-auto w-full border-collapse">
	  <thead>
	    <tr>
	      <th className="p-2 text-left">投稿</th>
	      <th className="p-2 text-left">変更</th>
	      <th className="p-2 text-left">日時</th>
	    </tr>
	  </thead>
	  <tbody>
	    {changes.map ((change, i) => {
	      let withPost = i === 0 || change.post.id !== changes[i - 1].post.id
	      if (withPost)
		{
		  rowsCnt = 1
		  for (let j = i + 1;
		       (j < changes.length
			&& change.post.id === changes[j].post.id);
		       ++j)
		    ++rowsCnt
		}
	      return (
		  <tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag.id }`}>
		    {withPost && (
			<td className="align-top" rowSpan={rowsCnt}>
			  <Link to={`/posts/${ change.post.id }`}>
			    <img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
				 alt={change.post.title || change.post.url}
				 title={change.post.title || change.post.url || undefined}
				 className="w-40"/>
			  </Link>
			</td>)}
		    <td>
		      <TagLink tag={change.tag} withWiki={false} withCount={false}/>
		      {`を${ change.changeType === 'add' ? '追加' : '削除' }`}
		    </td>
		    <td>
		      {change.user ? (
			  <Link to={`/users/${ change.user.id }`}>
			    {change.user.name}
			  </Link>) : 'bot 操作'}
		      <br/>
		      {change.timestamp}
		    </td>
		  </tr>)
	    })}
	  </tbody>
	</table>

	<Pagination page={page} totalPages={totalPages}/>
      </MainArea>)
}) satisfies FC
