import React, { useEffect, useState } from "react";
import { NextPage } from "next";
import Head from "next/head";
import { formatRelative } from "date-fns";
import AdminListCommon from "@views/admin/AdminListCommon";
import { Link } from "@components/index";
import AddLink from "@components/AddLink";
import { Post, getFeed } from "@models/Feed";

const URL = "/admin/feed";

const renderData = (feed: Post[]) => {
  if (!feed || feed.length === 0) {
    return <div>No posts.</div>;
  }

  return (
    <table>
      <thead>
        <tr>
          <th>Title</th>
          <th>Description</th>
          <th>Publish time</th>
        </tr>
      </thead>
      <tbody>
        {feed.map((post) => (
          <tr key={post.id}>
            <td><Link to={`${URL}/${post.id}`}>{post.title_fi}</Link></td>
            <td>{post.description_fi}</td>
            <td>{formatRelative(new Date(post.publish_time), new Date())}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const AdminFeedPage: NextPage = () => {
  const [forms, setForms] = useState<Post[]>(null);

  useEffect(() => {
    getFeed({ auth: true })
      .then((res) => setForms(res));
  }, []);

  return (
    <>
      <Head>
        <link rel="canonical" href={`https://sik.ayy.fi/${URL}`} />
      </Head>
      <AdminListCommon>
        <h1>Feed</h1>
        <AddLink text="Create news post" to={`${URL}/create`} />
        {renderData(forms)}
      </AdminListCommon>
    </>
  );
};

export default AdminFeedPage;
