---
import Layout from '../layouts/Layout.astro'
import '../styles/globals.css'
import { Header } from '../sections/Header'
import { Footer } from '../sections/Footer'
import { Enum_Category_Group } from '../graphql/graphql'
import { CategoryView } from '../views/CategoryView'
import { siteConfigQuery } from '../graphql-documents/site-config.gql.generated'
import { menuItemsQuery } from '../graphql-documents/menu-items.gql.generated'
import { categoryQuery } from '../graphql-documents/category.gql.generated'

const [siteResult, menuItemsResult] = await Promise.all([siteConfigQuery.execute(), menuItemsQuery.execute()])
if (siteResult.errors?.length) {
  throw new Error(siteResult.errors.map(e => e.message).join(', '))
}
const siteConfig = siteResult.data?.siteConfig
const siteTitle = siteConfig?.title ?? ''
const siteDescription = siteConfig?.description ?? ''
const contacts = siteConfig?.contacts?.filter(c => c != null) ?? []
if (menuItemsResult.errors?.length) {
  throw new Error(menuItemsResult.errors.map(e => e.message).join(', '))
}
const menuItems = (menuItemsResult.data?.categories?.filter(c => c != null) ?? []).sort(
  (a, b) => a.sortOrder - b.sortOrder
)
const solutionCategories = menuItems.filter(c => c.group === Enum_Category_Group.Solution)
const serviceCategories = menuItems.filter(c => c.group === Enum_Category_Group.Service)

const slug = Astro.params.slug

if (!slug) {
  throw new Error('Missing slug param for category page')
}

const categoryResult = await categoryQuery.execute({ slug })

if (categoryResult.errors?.length) {
  throw new Error(categoryResult.errors.map(e => e.message).join(', '))
}

const category = categoryResult.data?.categories?.find(c => c != null)

if (!category) {
  throw new Error(`Category not found for slug: ${slug}`)
}

const title = category.title ?? undefined
const description = category.description ?? undefined
const badge = category.badge ?? undefined
const vendors = (category.vendors?.filter(v => v != null) ?? []).map(vendor => ({
  name: vendor.title ?? undefined,
  description: vendor.description ?? undefined,
  products: (vendor.products?.filter(p => p != null) ?? []).map(product => product.value),
}))
---

<Layout
  title={title ? `${title} | ${siteTitle}` : siteTitle}
  description={description ?? siteDescription}
>
  <div class="min-h-screen bg-white w-full overflow-x-hidden">
    <Header client:load siteTitle={siteTitle} contacts={contacts} solutions={solutionCategories} services={serviceCategories} />
    <CategoryView client:load badge={badge} title={title} description={description} vendors={vendors} contacts={contacts} />
    <Footer client:load siteTitle={siteTitle} contacts={contacts} solutionCategories={solutionCategories} />
  </div>
</Layout>