import { graphql } from "@/gql";
import { EventFragment, EventPromoSettingsFragment } from "@/gql/graphql";
import { getClient } from "@/app/client";
import { FeaturedEvents } from "@/components/events/FeaturedEvents";
import { Body } from "@/components/general/Body";
import Image from "next/image";
import { PersonList } from "@/components/people/PersonList";
import { NewsList } from "@/components/news/NewsList";
import { PersonSection } from "@/components/people/PersonSection";
import { UpcomingEvents } from "@/components/events/UpcomingEvents";

const EventPromoSettingsFragmentDefinition = graphql(`
  fragment EventPromoSettings on EventPromoSettings {
    ... on EventPromoSettings {
      featuredEvents {
        id
      }
    }
  }
`);

export default async function Home() {
  const homeQuery = graphql(`
    query home {
      events: pages(contentType: "events.EventPage") {
        ...Event
      }
      eventPromoSettings: settings {
        ... on EventPromoSettings {
          ...EventPromoSettings
        }
      }
    }
  `);
  const { data, error } = await getClient().query(homeQuery, {});
  const events = (data?.events ?? []) as EventFragment[];
  const eventPromoSettings = (data?.eventPromoSettings[0] ??
    []) as EventPromoSettingsFragment;

  const featuredEventIds = eventPromoSettings.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" id="main">
      <div>
        <FeaturedEvents events={featuredEvents} />
        <UpcomingEvents events={events} />
        <NewsList heading="Siste nytt" limit={3} featured />
        <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
      </div>
    </main>
  );
}