<template>
  <div class="product">
    <div class="container">
      <div class="product__wrapper">
        <div class="product__block">
          <div class="product__images">
            <div class="product__images-gallery">
              <div
                  v-for="(image, idx) in images"
                  :key="idx"
                  @click="selectImage(image)"
                  :class="[{ active: image === selectedImage }]"
              >
                <nuxt-img
                    :src="image"
                    :alt="product?.name"
                    format="webp"
                    densities="x1"
                />
              </div>
            </div>
            <nuxt-img
                :src="selectedImage"
                :alt="product?.name"
                class="product__images-main"
                format="webp"
                densities="x1"
            />
          </div>
          <div class="product__main">
            <p class="product__main-brand">{{ product?.brand.name }}</p>
            <h1 class="product__title">{{ product?.name }}</h1>
            <el-rate
                class="product__main-rate"
                :model-value="product?.rating"
                allow-half
                disabled
            />
            <p class="product__main-price">{{ product?.price }} $</p>
            <p class="product__main-stock">{{ t('cards.product.stock') }} {{ product?.quantity }}</p>
            <p class="product__main-description">{{ product?.description }}</p>
            <div class="tools" v-if="isProductInCart">
              <button
                  class="tools__item tools__item-button"
                  @click="overwriteOrder({
                    type: 'remove',
                    productUuid: product.uuid,
                    productName: product.name
                  })"
              >
                -
              </button>
              <span class="tools__item tools__item-count" v-text="'X' + productInCartQuantity" />
              <button
                  class="tools__item tools__item-button"
                  @click="overwriteOrder({
                    type: 'add',
                    productUuid: product.uuid,
                    productName: product.name
                  })"
              >
                +
              </button>
            </div>
            <ui-button
                v-else
                class="product__main-button"
                @click="overwriteOrder({
                  type: 'add',
                  productUuid: product.uuid,
                  productName: product.name
                })"
                :type="'button'"
                :isLoading="addLoading"
            >
              {{ t('buttons.addToCart') }}
            </ui-button>
            <ui-button
                class="product__main-button"
                @click="overwriteWishlist({
                    type: (isProductInWishlist ? 'remove' : 'add'),
                    product: product
                })"
                :type="'button'"
                :style="'secondary'"
            >
              <icon name="mdi:cards-heart-outline" size="16" />
              {{ isProductInWishlist ? t('buttons.removeFromWishlist') : t('buttons.addToWishlist') }}
            </ui-button>
          </div>
        </div>
      </div>
<!--      <client-only>-->
<!--        <div class="characteristics" id="characteristics" v-if="attributes.length">-->
<!--          <div class="characteristics__wrapper">-->
<!--            <h6 class="characteristics__title">{{ t('product.characteristics') }}</h6>-->
<!--            <div class="characteristics__list">-->
<!--              <div-->
<!--                  class="characteristics__column"-->
<!--                  v-for="group in attributes"-->
<!--                  :key="group.uuid"-->
<!--              >-->
<!--                <h6 class="characteristics__column-title">{{ group.name }}</h6>-->
<!--                <p-->
<!--                    class="characteristics__item"-->
<!--                    v-for="item in group.items"-->
<!--                    :key="item.uuid"-->
<!--                >-->
<!--                  <span class="characteristics__item-label"><span>{{ item.name }}</span></span>-->
<!--                  <span class="characteristics__item-value">{{ item.valuesStr }}</span>-->
<!--                </p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </client-only>-->
      <div class="similar">
        <h6 class="similar__title">{{ t('product.similar') }}</h6>
        <div class="similar__inner">
          <div class="similar__button prev" ref="prevButton">
            <icon name="material-symbols:arrow-back-ios-new-rounded" size="30" />
          </div>
          <client-only>
            <swiper
                class="similar__swiper"
                :modules="[Navigation]"
                :spaceBetween="30"
                :breakpoints="{
                200: {
                  slidesPerView: 4
                }
              }"
                :navigation="{ prevEl: '.prev', nextEl: '.next' }"
            >
              <swiper-slide
                  v-for="prod in products"
                  :key="prod.node.uuid"
              >
                <cards-product
                    :product="prod.node"
                />
              </swiper-slide>
            </swiper>
          </client-only>
          <div class="similar__button next" ref="nextButton">
            <icon name="material-symbols:arrow-back-ios-new-rounded" size="30" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useProductBySlug, useProducts} from '@composables/products';
import {usePageTitle} from '@composables/utils';
import {useScrollTo} from '@composables/scrollTo';
import { Swiper, SwiperSlide } from 'swiper/vue';
import {Navigation} from 'swiper/modules';
import {useWishlistOverwrite} from '@composables/wishlist';
import {useOrderOverwrite} from '@composables/orders';
import {useDefaultSeo} from '@composables/seo';

const route = useRoute();
const {t, locale} = useI18n();
const wishlistStore = useWishlistStore();
const cartStore = useCartStore();
const { $appHelpers } = useNuxtApp();

const { setPageTitle } = usePageTitle();
const { scrollTo } = useScrollTo();

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

const { overwriteWishlist } = useWishlistOverwrite();
const { addLoading, removeLoading, overwriteOrder } = useOrderOverwrite();
const { product, seoMeta } = await useProductBySlug(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']])
    ),
  });
}

const { products } = useProducts({ categoriesSlugs: product.value?.category.slug });

const isProductInWishlist = computed(() => {
  const el = wishlistStore.wishlist?.products?.edges.find(
    (el) => el?.node?.uuid === product.value?.uuid
  );

  return !!el;
});
const isProductInCart = computed(() => {
  return cartStore.currentOrder?.orderProducts?.edges.find((prod) => prod.node.product.uuid === product.value?.uuid);
});

const productInCartQuantity = computed(() => {
  return cartStore.currentOrder?.orderProducts?.edges.filter((prod) => prod.node.product.uuid === product.value.uuid)[0].node.quantity;
});

const images = computed<string[]>(() =>
  product.value
    ? product.value.images.edges.map(e => e.node.image)
    : []
);

const attributes = computed(() => {
  const edges = product.value?.attributeGroups.edges ?? [];

  const mainIndex = edges.findIndex(e => e.node.name === 'Основные характеристики');
  const ordered = mainIndex >= 0
    ? [edges[mainIndex], ...edges.slice(0, mainIndex), ...edges.slice(mainIndex + 1)]
    : edges;

  return ordered.map(groupEdge => {
    const { node } = groupEdge
    return {
      uuid: node.uuid,
      name: node.name,
      items: node.attributes.map(attr => ({
        uuid: attr.uuid,
        name: attr.name,
        valuesStr: attr.values.map(v => v.value).join(', ')
      }))
    };
  });
});

const selectedImage = ref<string>(images.value[0] ?? '');
const selectImage = (image: string) => {
  selectedImage.value = image;
};

const prevButton = ref<HTMLElement | null>(null);
const nextButton = ref<HTMLElement | null>(null);

setPageTitle(product.value?.name ?? 'Product');

watch(
  () => route.params.slug,
  async (newSlug) => {
    if (typeof newSlug === 'string') {
      const { product } = await useProductBySlug(newSlug);
      setPageTitle(product.value?.name ?? 'Product');
    }
  }
);
</script>

<style scoped lang="scss">
.product {
  background-color: $white;
  padding-block: 50px 100px;

  &__title {
    font-family: "Playfair Display", sans-serif;
    color: #1e1e1e;
    font-size: 36px;
    font-weight: 600;
  }

  &__block {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
  }

  &__images {
    display: flex;
    align-items: flex-start;
    gap: 26px;

    &-gallery {
      display: flex;
      flex-direction: column;
      gap: 10px;

      & div {
        cursor: pointer;
        width: 75px;
        height: 75px;
        padding: 5px;
        border-radius: $default_border_radius;
        background-color: $white;
        border: 2px solid $white;
        transition: 0.2s;

        @include hover {
          box-shadow: 0 0 10px 1px $accent;

          &.active {
            box-shadow: 0 0 0 0 transparent;
          }
        }

        &.active {
          border: 2px solid $accent;
        }

        & img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          border-radius: $default_border_radius;
        }
      }
    }

    &-main {
      width: 550px;
      border-radius: $default_border_radius;
      object-fit: contain;
    }
  }

  &__main {
    display: flex;
    flex-direction: column;
    gap: 10px;

    &-brand {
      color: #1a1a1a;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.15px;
    }

    &-rate {
      margin-block: 10px 14px;
    }

    &-price {
      color: #1a1a1a;
      font-size: 30px;
      font-weight: 600;
      letter-spacing: -0.5px;
    }

    &-quantity {
      color: #1a1a1a;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.15px;
    }

    &-description {
      color: #374151;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: -0.5px;
    }

    &-button {
      margin-top: 25px;
    }
  }

  &__info {
    width: 400px;
    flex-shrink: 0;
    border-radius: $default_border_radius;
    background-color: $accent;
    padding: 5px;

    &-inner {
      border-radius: $default_border_radius;
      border: 2px solid $white;
      padding: 25px;
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    &-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      & p {
        color: $white;
        font-size: 16px;
        font-weight: 500;
      }

      & img {
        width: 75px;
        border-radius: $default_border_radius;
      }
    }

    &-price {
      width: fit-content;
      background-color: $accentDark;
      border-radius: $default_border_radius;
      border: 1px solid $white;
      padding: 7px 20px;

      font-size: 40px;
      font-weight: 700;
      color: $white;
    }

    &-bottom {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-shrink: 0;
    }

    &-button {
      width: unset !important;
      padding-inline: 25px !important;
      background-color: $white !important;
      color: $accent !important;

      font-size: 20px !important;

      @include hover {
        background-color: #e3e3e3 !important;
      }
    }

    &-wishlist {
      cursor: pointer;
      width: 41px;
      height: 41px;
      flex-shrink: 0;
      background-color: $white;
      border-radius: $default_border_radius;
      display: grid;
      place-items: center;
      transition: 0.2s;

      font-size: 22px;
      color: $accent;

      @include hover {
        background-color: #e3e3e3;
      }
    }
  }
}

.tools {
  width: 100%;
  border-radius: 4px;
  background-color: #111827;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  height: 40px;

  &__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    &-count {
      border-left: 1px solid $accent;
      border-right: 1px solid $accent;

      color: $white;
      font-size: 16px;
      font-weight: 600;
    }

    &-button {
      cursor: pointer;
      background-color: #111827;
      border-radius: 4px 0 0 4px;
      transition: 0.2s;

      color: $white;
      font-size: 18px;
      font-weight: 500;

      @include hover {
        background-color: #222c41;
        color: $white;
      }

      &:last-child {
        border-radius: 0 4px 4px 0;
      }
    }
  }
}

.characteristics {
  padding-top: 100px;

  &__wrapper {
    background-color: $white;
    border-radius: $default_border_radius;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
    padding: 20px;
  }

  &__title {
    padding-bottom: 10px;
    border-bottom: 2px solid $accentDark;
    color: $black;
    font-size: 24px;
    font-weight: 700;
  }

  &__list {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(100px, 30%));
    gap: 40px;
  }

  &__column {
    display: flex;
    flex-direction: column;
    gap: 8px;

    &-title {
      margin-bottom: 5px;
      color: $black;
      font-weight: 700;
      font-size: 16px;
    }
  }

  &__item {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 100%;
    gap: 5px;
    font-size: 14px;

    &-label {
      position: relative;
      font-weight: 500;

      & span {
        position: relative;
        z-index: 1;
        background-color: $white;
        padding-bottom: 1px;
      }

      &::after {
        border-bottom: 1px dashed $accent;
        content: "";
        min-width: 100%;
        position: absolute;
        right: 0;
        top: 1em;
      }
    }

    &-value {
      & span {
        &:first-child {
          & span {
            &:first-child {
              display: none;
            }
          }
        }
      }
    }
  }
}

.similar {
  margin-top: 100px;
  background-color: $white;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 45px 25px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;

  &__title {
    font-family: "Playfair Display", sans-serif;
    color: $black;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.5px;
  }
  
  &__inner {
    display: flex;
    align-items: stretch;
  }

  &__swiper {
    width: 100%;
    padding-block: 25px;
    padding-inline: 25px;
  }

  &__button {
    cursor: pointer;
    height: fit-content;
    margin-block: auto;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    padding-inline: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: $white;
    transition: 0.2s;

    @include hover {
      background-color: $accentLight;

      & span {
        color: $white;
      }
    }

    & span {
      transition: 0.2s;
      color: $accent;
    }

    &.next {
      & span {
        transform: rotate(180deg);
      }
    }
  }
}
</style>