import * as React from 'react';

import Head from 'next/head';
import Link from 'next/link';

import ListGroup from 'react-bootstrap/ListGroup';
import { Breadcrumb } from 'react-bootstrap';
import { useIntl } from 'react-intl';
import { FormattedMessage } from '../components/localization';
import { VideoOnDemandIndex } from '../util/datatypes/VideoOnDemandIdentifier';
import { getIndex } from '../util/api';

export async function getServerSideProps() {
  // Fetch VOD IDs and announcements
  const { announcements, ids } = await getIndex();

  return {
    props: {
      announcements,
      ids,
    },
  };
}

export default function Home({ announcements, ids }: VideoOnDemandIndex) {
  const intl = useIntl();
  return (
    <div>
      <Head>
        <title>
          {intl.formatMessage({
            id: 'App.title',
            description: 'The full title of the website',
            defaultMessage: 'Games Done Quick Instant Archive',
          })}
        </title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Breadcrumb>
        <Link passHref href="/">
          <Breadcrumb.Item active>
            <FormattedMessage
              id="Breadcrumb.homeTitle"
              defaultMessage="GDQ Instant Archive"
              description="Root node text in breadcrumb"
            />
          </Breadcrumb.Item>
        </Link>
      </Breadcrumb>

      <h1>
        <FormattedMessage
          id="Home.introText1"
          defaultMessage="Instant access to your favorite VODs of Games Done Quick!"
        />
      </h1>

      <p>
        <FormattedMessage
          id="Home.introText2"
          defaultMessage="This website collects all the broadcasted runs and allows streaming and downloading them."
        />
      </p>

      {
        announcements.map((text, id) => (
          <p key={id}>
            <b>Announcement:</b> {text}
          </p>
        ))
      }

      <ListGroup>
        {ids.map(({ id, title }) => (
          <Link key={id} passHref href="/[id]" as={`/${id}`}>
            <ListGroup.Item action>
              <h5>{title}</h5>
            </ListGroup.Item>
          </Link>
        ))}
      </ListGroup>
    </div>
  );
}
