import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import { ImageSliderBlock } from "@/components/blocks/ImageSliderBlock";
import { Breadcrumb } from "@/components/general/Breadcrumb";
import { Image } from "@/components/general/Image";
import { NeufMap } from "@/components/venues/NeufMap";
import { VenueInfo } from "@/components/venues/VenueInfo";
import { graphql } from "@/gql";
import { VenueFragment } from "@/gql/graphql";
import { notFound } from "next/navigation";

export async function generateStaticParams() {
  const allVenueSlugsQuery = graphql(`
    query allVenueSlugs {
      pages(contentType: "venues.VenuePage") {
        id
        slug
      }
    }
  `);
  const { data, error } = await getClient().query(allVenueSlugsQuery, {});

  if (data === undefined || error) {
    throw new Error("failed to generate static params");
  }

  return data?.pages.map((page: any) => ({
    slug: page.slug,
  }));
}

export default async function Page({ params }: { params: { slug: string } }) {
  const venueBySlugQuery = graphql(`
    query venueBySlug($slug: String!) {
      venue: page(contentType: "venues.VenuePage", slug: $slug) {
        ... on VenuePage {
          ...Venue
        }
      }
    }
  `);

  const { data, error } = await getClient().query(venueBySlugQuery, {
    slug: params.slug,
  });

  if (data?.venue === null || error) {
    return notFound();
  }

  const venue = (data?.venue ?? {}) as VenueFragment;
  const featuredImage: any = venue.featuredImage;

  // remove when real content is ready
  const placeholderBlock = {
    id: "d3971f38-32f9-46aa-9d56-9e69d2765cdc",
    blockType: "ImageSliderBlock",
    field: "image_slider",
    images: [
      {
        image: {
          id: "7",
          url: "https://cms.neuf.kult.444.no/media/original_images/22-06-02a_Storsalen_BR55620_FotoHelgeBrekke_SauXqU1.jpg",
          width: 1024,
          height: 683,
          alt: "",
          attribution: "Helge Brekke",
          __typename: "CustomImage",
        },
        text: "",
        __typename: "ImageSliderItemBlock",
      },
      {
        image: {
          id: "6",
          url: "https://cms.neuf.kult.444.no/media/original_images/biblioteket_zPrxTfl.jpg",
          width: 1200,
          height: 800,
          alt: "Biblioteket, inkl. boksamlingen og griseportretter",
          attribution: "",
          __typename: "CustomImage",
        },
        text: "For et fint bilde! Dette er bildetekst i et bildegalleri.",
        __typename: "ImageSliderItemBlock",
      },
      {
        image: {
          id: "3",
          url: "https://cms.neuf.kult.444.no/media/original_images/ABBAfever-22_websize-e1714644654899_kTNzMdU.jpg",
          width: 1200,
          height: 904,
          alt: "",
          attribution: "",
          __typename: "CustomImage",
        },
        text: "For et fint bilde! Dette er bildetekst i et bildegalleri. Jeg lurer også på hvordan det ser ut når bildeteksten går over flere linjer, så her er muligens en test av det. Det kommer sikkert litt an på skjermstørrelsen, men når jeg skriver såpass langt som dette er jeg garantert minst to linjer tror jeg!",
        __typename: "ImageSliderItemBlock",
      },
    ],
    __typename: "ImageSliderBlock",
  };

  return (
    <main className="site-main" id="main">
      <ImageSliderBlock block={placeholderBlock} hero />
      <div className="page-header-small">
        <Breadcrumb link="/utleie" text="Lokale" />
        <h1 className="page-title">{venue.title}</h1>
      </div>
      <Blocks blocks={venue.body} />
      <VenueInfo venue={venue} />
      <NeufMap venueSlug={venue.slug} />
    </main>
  );
}
