import { graphql } from "@/gql";
import { EventFragment } from "@/lib/event";
import { NewsFragment } from "@/lib/news";
import { HomeFragment } from "@/gql/graphql";
import { getClient } from "@/app/client";
import { FeaturedEvents } from "@/components/events/FeaturedEvents";
import { NewsList } from "@/components/news/NewsList";
import { UpcomingEvents } from "@/components/events/UpcomingEvents";
import { Pig } from "@/components/general/Pig";
import Link from "next/link";
import Icon from "@/components/general/Icon";
import { SectionHeader } from "@/components/general/SectionHeader";

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

export default async function Home() {
  const homeQuery = graphql(`
    query home {
      events: eventIndex {
        ... on EventIndex {
          futureEvents {
            ... on EventPage {
              ...Event
            }
          }
        }
      }
      home: page(contentType: "home.HomePage", urlPath: "/home/") {
        ... on HomePage {
          ...Home
        }
      }
      news: pages(contentType: "news.newsPage", order: "-first_published_at", limit: 4) {
        ... on NewsPage {
          ...News
        }
      }
    }
  `);
  const { data, error } = await getClient().query(homeQuery, {});
  const home = (data?.home ?? []) as HomeFragment;
  const events = (data?.events?.futureEvents ?? []) as EventFragment[];
  const news = (data?.news ?? []) as NewsFragment[];

  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">
      <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>
      </div>
      <NewsList heading="Siste nytt" featured news={news} />
    </main>
  );
}