import Link from "next/link";
import { graphql } from "@/gql";
import { HomeFragment } from "@/gql/graphql";
import { getClient } from "@/app/client";
import { cachedUntilOsloMidnight } from "@/lib/revalidation";
import { EventListItemFragment } from "@/lib/event";
import { NewsListItemFragment } from "@/lib/news";
import { FeaturedEvents } from "@/components/events/FeaturedEvents";
import { UpcomingEvents } from "@/components/events/UpcomingEvents";
import { Icon } from "@/components/general/Icon";
import { Newsletter } from "@/components/general/Newsletter";
import { Pig } from "@/components/general/Pig";
import { SectionFooter } from "@/components/general/SectionFooter";
import { SectionHeader } from "@/components/general/SectionHeader";
import { NewsList } from "@/components/news/NewsList";
import { StudioShortcut } from "../studio/StudioShortcut";

const HomeFragmentDefinition = graphql(`
  fragment Home on HomePage {
    __typename
    featuredEvents {
      id
    }
  }
`);

const homeQuery = graphql(`
  query home {
    events: eventIndex {
      ... on EventIndex {
        futureEvents {
          ... on EventPage {
            ...EventListItem
          }
        }
      }
    }
    home: page(contentType: "home.HomePage", urlPath: "/home/") {
      ... on HomePage {
        ...Home
      }
    }
    news: pages(contentType: "news.newsPage", order: "-first_published_at", limit: 4) {
      ... on NewsPage {
        ...NewsListItem
      }
    }
  }
`);

export type HomePageViewProps = {
  home: HomeFragment;
  events: EventListItemFragment[];
  news: NewsListItemFragment[];
};

export async function loadHomePageProps(overrides?: {
  homeOverride?: HomeFragment;
}): Promise<HomePageViewProps> {
  const { data, error } = await getClient().query(
    homeQuery,
    {},
    cachedUntilOsloMidnight()
  );
  if (error) throw new Error(error.message);
  const home = overrides?.homeOverride ?? (data?.home as HomeFragment | undefined);
  if (!home) throw new Error("Failed to load /");
  const events = (data?.events?.futureEvents ?? []) as EventListItemFragment[];
  const news = (data?.news ?? []) as NewsListItemFragment[];
  return { home, events, news };
}

export function HomePageView({ home, events, news }: HomePageViewProps) {
  const featuredEventIds = home.featuredEvents.map((x) => x.id);
  const featuredEvents = [
    ...events.filter((x) => featuredEventIds.includes(x.id)),
    ...events.filter((x) => !featuredEventIds.includes(x.id)),
  ];

  return (
    <>
      <main className="site-main index" id="main">
        <StudioShortcut />
        <FeaturedEvents events={featuredEvents} />
        <UpcomingEvents events={events} />
        <div className="infoBlock">
          <SectionHeader heading="Besøk oss" link="/praktisk" linkText="Praktisk info" />
          <div>
            <h2 className="title">Skal du besøke Chateau Neuf?</h2>
            <p>
              Vi hjelper deg med å finne frem, og sørger for at du har en fin
              opplevelse.
            </p>
            <Link href="/praktisk#adkomst" className="button">
              <span>Adresse og adkomst</span>
              <Icon type="arrowRight" />
            </Link>
            <Link href="/praktisk#billetter" className="button">
              <span>Billetter</span>
              <Icon type="arrowRight" />
            </Link>
            <Link href="/praktisk#apningstider" className="button">
              <span>Åpningstider</span>
              <Icon type="arrowRight" />
            </Link>
          </div>
          <div className="pig">
            <Pig type="point" />
          </div>
          <SectionFooter link="/praktisk" linkText="Praktisk info" />
        </div>
        <NewsList heading="Siste nytt" featured news={news} />
      </main>
      <Newsletter />
    </>
  );
}
