/**
 * Copyright (C) 2019-2021 Carl Kittelberger <icedream@icedream.pw>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import * as React from 'react';

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

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

interface HomeProps {
  index: VideoOnDemandIndex
}

export const getServerSideProps: GetServerSideProps<HomeProps> = async () => ({
  props: {
    // Fetch VOD IDs and announcements
    index: await getIndex(),
  },
});
const Home: NextPage<HomeProps> = function Home({ index: { announcements, ids } }) {
  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>
        <meta name="color-scheme" content="light dark" />
      </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) => (
          // eslint-disable-next-line react/no-array-index-key
          <p key={id}>
            <b>Announcement:</b>
            {' '}
            {text}
          </p>
        ))
      }

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

export default Home;
