<template>
  <div class="brand">
    <ui-title v-if="brand">
      <nuxt-img
          format="webp"
          width="150px"
          densities="x1"
          :src="brand.image"
          :alt="brand.name"
      />
      <h1>{{ brand.name }}</h1>
      <p>{{ brand.description }}</p>
    </ui-title>
    <div class="brand__main">
      <div class="container">
        <div class="brand__main-wrapper">
          <store />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useBrandBySlug} from '@composables/brands';
import {usePageTitle} from '@composables/utils';
import {useDefaultSeo} from '@composables/seo';
import {useRouteParams} from '@vueuse/router';

const { locale } = useI18n();
const { $appHelpers } = useNuxtApp();

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

const { setPageTitle } = usePageTitle();

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

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

if (meta) {
  useSeoMeta({
    title: meta.title || $appHelpers.APP_NAME,
    description: meta.description || meta.title || $appHelpers.APP_NAME,
    ogTitle: meta.og.title || undefined,
    ogDescription: meta.og.description || meta.title || $appHelpers.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');
</script>

<style lang="scss" scoped>
.brand {
  &__main {
    background-color: $main;
    padding-block: 70px;
    border-top: 1px solid $border;
  }
}
</style>