import React from "react";
import { NextPage, GetStaticProps } from "next";
import Head from "next/head";
import Event from "@models/Event";
import EventApi from "@api/eventApi";
import useFetchEvents from "@hooks/useFetchEvents";
import Post from "@models/Feed";
import FeedApi from "@api/feedApi";
import useFetchFeed from "@hooks/useFetchFeed";
import FrontPageView from "@views/FrontPage/FrontPageView";
import PageWrapper from "@views/common/PageWrapper";

const eventOptions = {
  onlyNonPast: true,
  limit: 4,
};

const feedOptions = {
  limit: 4,
};

interface InitialProps {
  initialEvents: Event[];
  initialFeed: Post[];
}

const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
  const eventResult = useFetchEvents({ initialData: initialEvents, options: eventOptions });
  const feedResult = useFetchFeed({ initialData: initialFeed, options: feedOptions });

  return (
    <>
      <Head>
        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/`} />
      </Head>
      <PageWrapper>
        <FrontPageView events={eventResult.data as Event[]} feed={feedResult.data} />
      </PageWrapper>
    </>
  );
};

export const getStaticProps: GetStaticProps<InitialProps> = async () => {
  const initialEvents = await EventApi.getEvents(eventOptions);
  const initialFeed = await FeedApi.getFeed(feedOptions);
  return {
    props: {
      initialEvents,
      initialFeed,
    },
    revalidate: 10,
  };
};

export default FrontPage;
