<template>
  <q-page>
    <!-- <p>{{ $route.params.id }}</p> -->

    <Container class="product-container" tag="section">
      <ProductCarousel>
        <q-carousel-slide
          :name="1"
          img-src="https://cdn.quasar.dev/img/mountains.jpg"
          class="product-gallery-item"
        />
        <q-carousel-slide
          :name="2"
          img-src="https://cdn.quasar.dev/img/parallax1.jpg"
          class="product-gallery-item"
        />
        <q-carousel-slide
          :name="3"
          img-src="https://cdn.quasar.dev/img/parallax2.jpg"
          class="product-gallery-item"
        />
        <q-carousel-slide
          :name="4"
          img-src="https://cdn.quasar.dev/img/quasar.jpg"
          class="product-gallery-item"
        />
      </ProductCarousel>

      <div class="product-content">
        <header class="product-content-header">
          <h3 class="product-content-title subtitle">Ramo Lucena</h3>

          <div class="product-header-block">
            <p class="product-content-paragraph">
              SKU:
              <span class="green-text">52G201</span>
            </p>

            <p class="product-content-paragraph">
              Categoría:
              <span class="green-text">Ramos</span>
            </p>
          </div>
        </header>

        <div class="product-content-body">
          <div class="product-content-paragraphs">
            <p class="product-price green-text">30€</p>
            <p class="product-delivery green-text">Envío Gratuito</p>
            <p class="product-description">
              Descripción del producto, nombrar las flores y verdes, productos
              utilizados en único ramo. Lorem ipsum dolor sit amet,cosed do
              eiusmode tempor incididu ut labore et dolo magna alic...
            </p>
          </div>

          <form class="product-form" @submit.prevent="handleDedicationSubmit">
            <div class="product-dedication">
              <header class="product-dedication-header">
                <IconPencilGreen />
                <label class="product-dedication-paragraph" for="">
                  ¿Deseas añadir una dedicatoria?
                </label>
              </header>

              <div class="product-dedication-body">
                <q-input
                  v-model="dedication"
                  bg-color="white"
                  standout
                  color="primary"
                />
              </div>
            </div>

            <q-btn type="submit" color="primary" class="btn sm-btn">
              AÑADIR AL CARRITO
            </q-btn>
          </form>
        </div>

        <footer class="product-content-footer">
          <p class="product-share-paragraph">Conmparte con tus amigos</p>

          <div class="product-share-content">
            <a href="#" class="product-share-item"><IconShare /></a>
            <a href="#" class="product-share-item"><IconLinkedin /></a>
            <a href="#" class="product-share-item"><IconTwitter /></a>
            <a href="#" class="product-share-item"><IconEmail /></a>
            <a href="#" class="product-share-item"><IconWhatsapp /></a>
          </div>
        </footer>
      </div>

      <div class="product-pag-block">
        <q-btn
          color="white"
          class="btn outlined rounded sm-btn product-pag-item product-prev-btn"
          to="/"
        >
          <IconArrowCircleFilledLeft />

          <div class="btn-pag-paragraphs">
            <p class="btn-paragraph-top green-text">Produto anterior</p>
            <p class="product-paragraph-bottom">Ramo Leticia</p>
          </div>
        </q-btn>

        <q-btn
          color="white"
          class="btn outlined rounded sm-btn product-pag-item product-next-btn"
          to="/"
        >
          <div class="btn-pag-paragraphs">
            <p class="btn-paragraph-top green-text">Siguiente producto</p>
            <p class="product-paragraph-bottom">Ramo Rosas</p>
          </div>

          <IconArrowCircleFilledRight />
        </q-btn>
      </div>
    </Container>

    <DudasSection isWhite />

    <Container class="like-another-container gray-bg" tag="section">
      <header class="like-another-header">
        <h3 class="like-another-title subtitle">
          Quizás también te gusten estos ramos
        </h3>

        <p class="like-another-paragraph">
          Descripción SEO: Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua.
        </p>
      </header>

      <Container cardContainer>
        <template
          v-for="({ imgSrc, discount, isNew, title, value, id }, i) in cardMock"
        >
          <card
            v-if="i < 4"
            :productValue="value"
            :productName="title"
            :discount="discount.toString()"
            :imgSrc="imgSrc"
            :isNew="isNew"
            :key="i"
            :id="id"
          />
        </template>
      </Container>
    </Container>
  </q-page>
</template>

<script lang="ts">
import { fakerES } from '@faker-js/faker';
import { storeToRefs } from 'pinia';
import { useMeta } from 'quasar';
import { MetaOptions } from 'quasar/dist/types/meta';
import { defineComponent, ref } from 'vue';

import IconArrowCircleFilledLeft from 'src/components/icons/IconArrowCircleFilledLeft.vue';
import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue';
import IconPencilGreen from 'src/components/icons/IconPencilGreen.vue';
import IconEmail from 'src/components/icons/social/IconEmail.vue';
import IconLinkedin from 'src/components/icons/social/IconLinkedin.vue';
import IconShare from 'src/components/icons/social/IconShare.vue';
import IconTwitter from 'src/components/icons/social/IconTwitter.vue';
import IconWhatsapp from 'src/components/icons/social/IconWhatsapp.vue';
import ProductCarousel from 'src/components/quasar-components/carousel/ProductCarousel.vue';
import DudasSection from 'src/components/sections/DudasSection.vue';
import Card from 'src/components/ui/Card.vue';
import Container from 'src/components/ui/Container.vue';
// import { cardMock } from 'src/mock/cards';
import { useTextInputStore } from 'src/stores/textInput';

const metaData: MetaOptions = {
  title: 'Product',
  titleTemplate: (title) => `${title} - FloraNet`,
  meta: {
    description: { name: 'description', content: 'Page 1' },
    keywords: { name: 'keywords', content: 'Quasar website' },
    equiv: {
      'http-equiv': 'Content-Type',
      content: 'text/html; charset=UTF-8',
    },
    ogTitle: {
      property: 'og:title',
      template(ogTitle) {
        return `${ogTitle} - FloraNet`;
      },
    },
    noscript: {
      default: 'This is content for browsers with no JS (or disabled JS)',
    },
  },
};

export default defineComponent({
  name: 'ProductPage',
  components: {
    IconPencilGreen,
    // IconSearchGray,
    IconWhatsapp,
    IconLinkedin,
    IconTwitter,
    IconShare,
    IconEmail,
    DudasSection,
    Container,
    Card,
    IconArrowCircleFilledRight,
    IconArrowCircleFilledLeft,
    ProductCarousel,
  },
  setup() {
    useMeta(metaData);
    const textInputStore = useTextInputStore();
    const { dedication } = storeToRefs(textInputStore);
    const { handleDedicationSubmit } = textInputStore;

    const cardMock = Array.from({ length: 4 }, (_, i) => ({
      id: i + 1,
      title: fakerES.lorem.word(),
      attributes: [''],
      imgSrc: `../assets/flowers/flower-${i + 1}.png`,
      value: fakerES.commerce.price({ symbol: '€', min: 15, max: 200 }),
      isNew: fakerES.datatype.boolean(),
      discount: fakerES.number.int({ min: 5, max: 25 }),
    }));

    return {
      cardMock,
      slide: ref(1),
      fullscreen: ref(false),
      handleDedicationSubmit,
      dedication,
    };
  },
});
</script>

<style lang="scss">
.product-container {
  display: flex;
  flex-wrap: wrap;
  gap: 136px;
  margin-bottom: 100px;
  & .product-gallery {
    /* flex: 1 0 min(100%, 562px); */
    height: 622px;
    flex: 1 0 min(100%, 500px);
    overflow: initial;
    & .q-carousel__slides-container .q-panel {
      border-radius: 15px;
      overflow: hidden;
    }

    & .q-carousel__navigation {
      bottom: -127px;
      left: 0;
      right: 0;
      & .q-carousel__navigation-inner {
        justify-content: flex-start;
        gap: 19px;
        & .q-carousel__thumbnail {
          width: 97px;
          height: 107px;
          object-fit: cover;
          border-radius: 10px;
          opacity: 1;
          flex: 0 0 97px;
          position: relative;
          &.q-carousel__thumbnail--active {
            border: 1px solid $primary;
          }
        }
      }
    }

    @media only screen and (max-width: $med-md) {
      height: 396px;
      & .q-carousel__navigation {
        bottom: -83px;
        & .q-carousel__navigation-inner {
          gap: 12px;
          & .q-carousel__thumbnail {
            width: 61px;
            height: 68px;
            flex: 0 0 61px;
            &::after {
              content: '';
            }

            &.q-carousel__thumbnail--active {
              border: 1px solid $primary;
            }
          }
        }
      }
    }
  }

  & .product-content {
    flex: 1 0 min(100%, 466px);
    margin-bottom: 27px;
    & .product-content-header {
      margin-bottom: 20px;
      & .product-content-title {
        margin-bottom: 14px;
        opacity: 0.9;
      }

      & .product-header-block {
        & .product-content-paragraph {
          font-size: $font-14;
          line-height: 21px;
          letter-spacing: 0.28px;
          color: $text-gray;
        }
      }

      @media only screen and (max-width: $med-md) {
        margin-bottom: 30px;
      }
    }

    & .product-content-body {
      display: flex;
      flex-direction: column;
      margin-bottom: 36px;
      gap: 60px;
      & .product-content-paragraphs {
        & .product-price {
          font-weight: 500;
          letter-spacing: 0.8px;
          line-height: 21px;
          font-family: $font-lora;
          font-size: $font-40;
          margin-bottom: 12px;
        }

        & .product-delivery {
          font-size: $font-14;
          line-height: 24px;
          letter-spacing: 0.28px;
          margin-bottom: 20px;
        }

        & .product-description {
          font-size: $font-14;
          line-height: 21px;
          letter-spacing: 0.28px;
          color: $text-gray;
        }
      }

      & .product-form {
        display: flex;
        flex-direction: column;
        gap: 22px;
        & .product-dedication {
          display: flex;
          flex-direction: column;
          gap: 22px;
          background-color: $secondary-10;
          border-radius: 10px;
          padding: 18px 31px 28px;
          & .product-dedication-header {
            display: flex;
            align-items: center;
            gap: 10px;
          }

          & .product-dedication-body {
            border: 1px solid $secondary-40;
          }
        }
      }

      @media only screen and (max-width: $med-md) {
        margin-bottom: 30px;
        gap: 24px;
        & .product-content-paragraphs {
          & .product-price {
            margin-bottom: 30px;
          }

          & .product-delivery {
            display: none;
          }
        }

        & .product-form .product-dedication {
          padding: 18px 26px 28px;
        }
      }
    }

    & .product-content-footer {
      display: flex;
      flex-direction: column;
      gap: 10px;
      & .product-share-paragraph {
        color: $text-muted-one;
        font-size: $font-14;
        line-height: 21px;
        letter-spacing: 0.28px;
      }

      & .product-share-content {
        display: flex;
        gap: 6px;
      }

      @media only screen and (max-width: $med-md) {
        align-items: center;
      }
    }
  }

  & .product-pag-block {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    & .product-pag-item {
      margin-top: 76px;
      &::before {
        content: '';
        display: none;
      }

      & .q-focus-helper {
        display: none;
      }

      & .q-btn__content {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: start;
        gap: 14px;
        flex-wrap: nowrap;
      }

      &.product-prev-btn {
        padding: 10px 55px 10px 20px;
      }

      &.product-next-btn {
        padding: 10px 20px 10px 55px;
        & .q-btn__content {
          text-align: end;
        }
      }
    }
  }

  @media only screen and (max-width: $med-md) {
    display: block;
    gap: 130px;
    & .product-gallery {
      margin-bottom: 130px;
    }

    & .product-pag-block {
      flex: initial;
      & .product-pag-item {
        margin: initial;
        justify-content: center;
        align-items: center;
        padding: 20px 29px 14px 20px !important;

        & .q-btn__content {
          gap: 12px;

          & > svg {
            flex: 0 0 23px;
          }
        }

        &.product-prev-btn,
        &.product-next-btn {
          padding: 17px 29px 14px 20px;
        }

        & .btn-pag-paragraphs {
          font-size: $font-14;
          & p {
            font-size: inherit;
          }

          & .product-paragraph-bottom {
            display: none;
          }
        }
      }
    }
  }
}

.like-another-container {
  display: flex;
  flex-direction: column;
  gap: 82px;
  padding-block: 129px 126px;
  text-align: center;

  & .like-another-header {
    display: flex;
    flex-direction: column;
    gap: 25px;

    & .like-another-title {
      font-weight: 500;
      font-size: $font-35;
      line-height: 30px;
    }

    & .like-another-paragraph {
      color: $text-default;
      line-height: 26px;
    }
  }

  @media only screen and (max-width: $med-md) {
    gap: 61px;
    padding-block: 62px 108px;

    & .like-another-header {
      & .like-another-title {
        font-size: $font-24;
      }

      & .like-another-paragraph {
        font-size: $font-14;
        line-height: 18px;
      }
    }
  }
}
</style>
