<template>
  <q-page class="category-container">
    <section class="products-section">
      <header class="products-section-header">
        <Container>
          <div class="product-header-content">
            <h3 class="product-header-title subtitle">
              {{ sortProductFilters.category }} para obsequiar
            </h3>
            <p class="product-header-paragraph">
              Descripción SEO: Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.
            </p>
          </div>

          <div class="product-header-filters">
            <div class="product-left-filters">
              <div class="filter-item availability-filter">
                <p class="filter-paragraph availability">
                  Disponibilidad para:
                  <span
                    v-if="availability.date && availability.postalCode"
                    class="green-text"
                  >
                    25 Julio en
                    {{ availability.postalCode.replace("-", "") }}</span
                  >
                </p>

                <q-btn
                  flat
                  class="btn filter-btn availability"
                  type="button"
                  @click="modalStore.openModal({ modal: 'availability' })"
                >
                  <IconPencil />
                </q-btn>
              </div>
            </div>

            <div class="product-right-filters">
              <q-btn
                flat
                class="btn filter-item filters filter-btn"
                type="button"
                @click="modalStore.openModal({ modal: 'filters' })"
              >
                <p class="filter-paragraph remove-mob">Filtros</p>
                <IconFilter />
              </q-btn>

              <div
                class="filter-item order-filter"
                :class="sortProductFilters.isOpenOrderFilter && 'active'"
              >
                <div class="order-filters">
                  <p class="filter-paragraph">
                    Ordenar por:
                    <span class="green-text">
                      {{ orderText[sortProductFilters.order] || "" }}
                    </span>
                  </p>

                  <SortSelect v-if="sortProductFilters.isOpenOrderFilter" />
                </div>

                <q-btn
                  flat
                  @click="openOrderFilter"
                  type="button"
                  class="btn filter-btn price-order"
                >
                  <IconArrowDownWhite />
                </q-btn>
              </div>
            </div>
          </div>
        </Container>
      </header>

      <div class="products-section-body">
        <Container cardContainer>
          <Card
            v-for="(
              { imgSrc, discount, isNew, title, value, id }, i
            ) in cardsMock"
            :productValue="value"
            :productName="title"
            :discount="discount.toString()"
            :imgSrc="imgSrc"
            :isNew="isNew"
            :key="i"
            :id="id"
          />
        </Container>
      </div>

      <footer class="products-section-footer">
        <RouterLink class="btn rounded outlined" to="/">
          Ver todos los diseños <IconArrowCircleFilledRight />
        </RouterLink>
      </footer>
    </section>

    <dudas-section />
    <modal modalItem="isOpenAvailability" />
    <modal modalItem="isOpenFilters" />
  </q-page>
</template>

<script>
import { fakerES } from "@faker-js/faker";
import { storeToRefs } from "pinia";
import {
  defineAsyncComponent,
  defineComponent,
  onUpdated,
  reactive,
  ref,
  watch,
} from "vue";
import { useRoute } from "vue-router";

import SortSelect from "src/components/@inputs/SortSelect.vue";
import IconArrowCircleFilledRight from "src/components/icons/IconArrowCircleFilledRight.vue";
import IconArrowDownWhite from "src/components/icons/IconArrowDownWhite.vue";
import IconFilter from "src/components/icons/IconFilter.vue";
import IconPencil from "src/components/icons/IconPencil.vue";
import Container from "src/components/ui/Container.vue";
import { useFormStore } from "src/stores/forms";
import { useModalStore } from "src/stores/modalStore";

export default defineComponent({
  name: "CategoryPage",
  components: {
    IconArrowCircleFilledRight,
    IconArrowDownWhite,
    IconPencil,
    IconFilter,
    Container,
    DudasSection: defineAsyncComponent(() =>
      import("src/components/sections/DudasSection.vue")
    ),
    Modal: defineAsyncComponent(() => import("src/components/ui/Modal.vue")),
    Card: defineAsyncComponent(() => import("src/components/ui/Card.vue")),
    SortSelect,
  },
  setup() {
    const modalStore = useModalStore();
    const formStore = useFormStore();
    const { availability, sortProductFilters } = storeToRefs(formStore);
    const monthES = reactive({
      0: "Enero",
      1: "Febrero",
      2: "Marzo",
      3: "Abril",
      4: "Mayo",
      5: "Junio",
      6: "Julio",
      7: "Agosto",
      8: "Septiembre",
      9: "Octubre",
      10: "Noviembre",
      11: "Diciembre",
    });
    const isOpenOrder = ref(false);
    const route = useRoute();
    const cardsMock = Array.from({ length: 8 }, (_, i) => ({
      id: i + 1,
      imgSrc: `../assets/flowers/flower-${i + 1}.png`,
      discount: fakerES.number.int({ min: 5, max: 15 }),
      isNew: fakerES.datatype.boolean(),
      title: fakerES.commerce.product(),
      value: fakerES.commerce.price({ min: 30, max: 100 }),
    }));
    const orderText = {
      "lowest-price": "menor precio",
      "highest-price": "mayor precio",
      recommended: "recomendados",
      latest: "más recientes",
    };

    watch(
      () => route.path,
      (newPatch) => {
        sortProductFilters.value.category = newPatch.split("/")[2];
      }
    );

    onUpdated(() => {
      console.groupCollapsed("%c Updated!", "color: green;");
      console.log(sortProductFilters.value);
      console.groupEnd();
    });

    function openOrderFilter() {
      sortProductFilters.value.isOpenOrderFilter =
        !sortProductFilters.value.isOpenOrderFilter;
    }

    return {
      sortProductFilters,
      openOrderFilter,
      availability,
      isOpenOrder,
      modalStore,
      orderText,
      cardsMock,
    };
  },
});
</script>

<style lang="scss" scoped>
.products-section {
  display: flex;
  flex-direction: column;

  margin-bottom: 82px;

  & .products-section-header {
    & .product-header-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text-align: center;
      gap: 25px;
      margin-bottom: 93px;
      & .product-header-title::first-letter {
        text-transform: capitalize;
      }
    }

    & .product-header-filters {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 41px;
      margin-bottom: 78px;
      & .filter-paragraph {
        font-size: $font-14;
        color: $text-gray;
        white-space: nowrap;
      }

      & .filter-item {
        padding: 4px 0 4px 14px;
        background-color: $secondary-10;
        border-radius: 30px 0 0 30px;
        display: flex;
        align-items: center;
        position: relative;
        user-select: none;
        &.availability-filter {
          padding: 4px 30px 4px 14px;
        }
        &.order-filter {
          padding: 4px 10px 4px 20px;
          text-align: end;
          border-radius: 10px 0px 0px 10px;
          &.active {
            border-radius: 10px 0px 0px 0px;
          }

          & .order-filters {
            position: relative;
          }
        }

        &.filters {
          padding: 4px 15px 4px 10px;
          border-radius: 30px;
        }
        &.filter-price-order {
        }
      }

      & .filter-btn {
        padding: 8px;
        border-radius: 0 30px 30px 0;

        &.availability,
        &.price-order {
          position: absolute;
        }

        &.availability {
          right: -27px;
          padding: 6.5px;
        }

        &.price-order {
          right: -33px;
          padding: 9.5px;
          top: 0;
        }
      }

      & .product-right-filters {
        display: flex;
        gap: 40px;
        margin-right: 33px;
        align-items: flex-start;
      }

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

        & .filter-paragraph.remove-mob {
          display: none;
        }

        & .filter-item.filters {
          padding: 4px 8px;
        }

        & .product-left-filters {
          flex: 1;
          margin-right: 28px;
        }

        & .product-right-filters {
          flex: 1;
          justify-content: space-between;
        }
      }
    }
  }
  & .products-section-body {
    margin-bottom: 95px;
  }
  & .products-section-footer {
    align-self: center;
  }
}
</style>
