<template>
  <div class="brand">
    <ui-title>{{ brand?.name }}</ui-title>
    <div class="brand__categories">
      <cards-category
          v-for="category in brand?.categories"
          :key="category.uuid"
          :category="category"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {useBrandBySlug} from "~/composables/brands";
import {usePageTitle} from "~/composables/utils";
import {useDefaultSeo} from "~/composables/seo/index.js";
import {useRouteParams} from "@vueuse/router";
import {useAppConfig} from "~/composables/config";

const { locale } = useI18n();

const slug = useRouteParams<string>('slug');

const { APP_NAME } = useAppConfig();
const { setPageTitle } = usePageTitle();

const { brand, seoMeta } = await useBrandBySlug(slug.value);

const meta = useDefaultSeo(seoMeta.value || null);

if (meta) {
  useSeoMeta({
    title: meta.title || APP_NAME,
    description: meta.description || meta.title || APP_NAME,
    ogTitle: meta.og.title || undefined,
    ogDescription: meta.og.description || meta.title || APP_NAME,
    ogType: meta.og.type || undefined,
    ogUrl: meta.og.url || undefined,
    ogImage: meta.og.image || undefined,
    twitterCard: meta.twitter.card || undefined,
    twitterTitle: meta.twitter.title || undefined,
    twitterDescription: meta.twitter.description || undefined,
    robots: meta.robots,
  });

  useHead({
    link: [
      meta.canonical ? { rel: 'canonical', href: meta.canonical } : {},
    ].filter(Boolean) as any,
    meta: [{ property: 'og:locale', content: locale.value }],
    script: meta.jsonLd.map((obj: any) => ({
      type: 'application/ld+json',
      innerHTML: JSON.stringify(obj),
    })),
    __dangerouslyDisableSanitizersByTagID: Object.fromEntries(
        meta.jsonLd.map((_, i: number) => [`ldjson-${i}`, ['innerHTML']])
    ),
  });
}

setPageTitle(brand.value?.name ?? 'Brand');
// TODO: add product by this brand
</script>

<style lang="scss" scoped>
.brand {
  &__categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, 275px);
    align-items: center;
    justify-content: center;
    gap: 50px;
  }
}
</style>