<template>
  <div class="product" v-if="product">
    <div class="container">
      <div class="product__wrapper">
        <h1 class="product__title">{{ product.name }}</h1>
        <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__center">
            <p class="product__center-description">{{ product.description }}</p>
            <p
                class="product__center-characteristic"
                @click="scrollTo('characteristics')"
            >
              {{ t('product.characteristics') }}
            </p>
          </div>
          <div class="product__info">
            <div class="product__info-inner">
              <div class="product__info-top">
                <p>{{ t('cards.product.stock') }} {{ product.quantity }}</p>
                <nuxt-img
                    :src="product.brand.smallLogo"
                    :alt="product.brand.name"
                    format="webp"
                    densities="x1"
                />
              </div>
              <el-rate
                  class="white"
                  v-model="rating"
                  allow-half
                  disabled
              />
              <div class="product__info-price">{{ product.price }} {{ CURRENCY }}</div>
              <div class="product__info-bottom">
                <ui-button
                    class="product__info-button"
                    v-if="isProductInCart"
                    @click="overwriteOrder({
                      type: 'remove',
                      productUuid: product.uuid,
                      productName: product.name
                    })"
                    :isLoading="removeLoading"
                >
                  {{ t('buttons.removeFromCart') }}
                </ui-button>
                <ui-button
                    class="product__info-button"
                    v-else
                    @click="overwriteOrder({
                      type: 'add',
                      productUuid: product.uuid,
                      productName: product.name
                    })"
                    :isLoading="addLoading"
                >
                  {{ t('buttons.addToCart') }}
                </ui-button>
                <div
                    class="product__info-wishlist"
                    @click="overwriteWishlist({
                      type: (isProductInWishlist ? 'remove' : 'add'),
                      productUuid: product.uuid,
                      productName: product.name
                    })"
                >
                  <icon name="mdi:cards-heart" size="28" v-if="isProductInWishlist" />
                  <icon name="mdi:cards-heart-outline" size="28" v-else />
                </div>
              </div>
            </div>
          </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>
          <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>
          <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 {useRouteParams} from "@vueuse/router";
import {useScrollTo} from "~/composables/scrollTo";
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import {Navigation} from "swiper/modules";
import {CURRENCY} from "~/config/constants";
import {useWishlistOverwrite} from "~/composables/wishlist";
import {useOrderOverwrite} from "~/composables/orders";

const route = useRoute();
const {t} = useI18n();
const wishlistStore = useWishlistStore();
const cartStore = useCartStore();

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

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

const { overwriteWishlist } = useWishlistOverwrite();
const { addLoading, removeLoading, overwriteOrder } = useOrderOverwrite();
const { product } = await useProductBySlug(slug.value);
const { products, getProducts } = await useProducts();
await getProducts({
  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 images = computed<string[]>(() =>
  product.value
    ? product.value.images.edges.map(e => e.node.image)
    : []
);

const rating = computed(() => {
  return product.value?.feedbacks.edges[0]?.node?.rating ?? 3;
});

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 {
  margin-top: 25px;

  &__title {
    padding-bottom: 10px;
    border-bottom: 2px solid #5743b5;
    color: #5743b5;
    font-size: 24px;
    font-weight: 600;
  }

  &__block {
    margin-top: 25px;
    border-radius: $default_border_radius;
    background-color: $white;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
  }

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

    &-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: 400px;
      height: 400px;
      border-radius: $default_border_radius;
      object-fit: contain;
      border: 2px solid $accent;
    }
  }

  &__center {
    display: flex;
    flex-direction: column;
    gap: 25px;

    &-description {
      color: $black;
      font-size: 16px;
      font-weight: 600;
    }

    &-characteristic {
      cursor: pointer;
      transition: 0.2s;
      color: $accent;
      font-size: 16px;
      font-weight: 700;

      @include hover {
        color: $accentDark;
      }
    }
  }

  &__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;
      }
    }
  }
}

.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: 25px 10px 0 10px;
  border-radius: $default_border_radius;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);

  &__title {
    padding-bottom: 10px;
    margin-inline: 15px;
    border-bottom: 2px solid $accentDark;
    color: $black;
    font-size: 24px;
    font-weight: 700;
  }
  
  &__inner {
    display: flex;
    align-items: stretch;
  }

  &__swiper {
    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>