import React from "react";
import { NextPage, GetStaticProps } from "next";
import Head from "next/head";
import useSWR from "swr";
import Event from "@models/Event";
import Post from "@models/Feed";
import FrontPageView from "@views/FrontPage/FrontPageView";
import PageWrapper from "@views/common/PageWrapper";
import { fetcher, API, APIPath } from "@api/backend";

const eventApi: API = {
  path: APIPath.EVENTS,
  queryParams: {
    limit: 4,
  },
};

const feedApi: API = {
  path: APIPath.FEED,
  queryParams: {
    limit: 4,
  },
};
interface InitialProps {
  initialEvents: Event[];
  initialFeed: Post[];
}

const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
  const { data: events } = useSWR<Event[]>(eventApi, fetcher, { fallbackData: initialEvents });
  const { data: feed } = useSWR<Post[]>(feedApi, fetcher, { fallbackData: initialFeed });

  return (
    <>
      <Head>
        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/`} />
      </Head>
      <PageWrapper>
        <FrontPageView events={events} feed={feed} />
      </PageWrapper>
    </>
  );
};

export const getStaticProps: GetStaticProps<InitialProps> = async () => {
  const initialEvents = fetcher<Event[]>(eventApi);
  const initialFeed = fetcher<Post[]>(feedApi);
  return {
    props: {
      initialEvents: await initialEvents,
      initialFeed: await initialFeed,
    },
    revalidate: 10,
  };
};

export default FrontPage;
