<template>
  <BaseViewWrapper title="Корзина">
    <div v-if="cart.attention" role="alert" class="alert alert-warning">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
      <span>{{ cart.attention }}</span>
    </div>

    <div v-if="cart.error_warning" role="alert" class="alert alert-error">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <span>{{ cart.error_warning }}</span>
    </div>

    <div v-if="cart.items.length > 0" class="pb-10">
      <div
          v-for="(item, index) in cart.items"
          :key="item.cart_id"
          class="card card-border bg-base-100 card-sm mb-3"
          :class="item.stock === false ? 'border-error' : ''"
      >
        <div class="card-body">
          <div class="flex">
            <div class="mr-2">
              <div class="w-16 rounded">
                <img :src="item.thumb"/>
              </div>
            </div>

            <div>
              <RouterLink :to="{name: 'product.show', params: {id: item.product_id}}" class="card-title">
                {{ item.name }} <span v-if="! item.stock" class="text-error font-bold">***</span>
              </RouterLink>
              <p class="text-sm font-bold">{{ item.total }}</p>
              <p>{{ item.price }}/ед</p>
              <div>
                <div v-for="option in item.option">
                  <p><span class="font-bold">{{ option.name }}</span>: {{ option.value }}</p>
                  <!--              <component-->
                  <!--                  v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"-->
                  <!--                  :is="componentMap[option.type]"-->
                  <!--                  :option="option"-->
                  <!--              />-->
                  <!--              <div v-else class="text-sm text-error">-->
                  <!--                Тип опции "{{ option.type }}" не поддерживается.-->
                  <!--              </div>-->
                </div>
              </div>
            </div>
          </div>

          <div class="card-actions justify-between">
            <Quantity
                :disabled="cart.isLoading"
                v-model="item.quantity"
                @update:modelValue="cart.setQuantity(item.cart_id, $event)"
            />
            <button class="btn btn-error" @click="removeItem(item, item.cart_id, index)" :disabled="cart.isLoading">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div class="card card-border bg-base-100 mb-3">
        <div class="card-body">
          <h2 class="card-title">Ваша корзина</h2>
          <div v-for="total in cart.totals">
            <div class="flex justify-between">
              <span class="text-xs text-base-content mr-2">{{ total.title }}:</span>
              <span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
              <span v-else class="text-xs font-bold">{{ total.text }}</span>
            </div>
          </div>
        </div>
      </div>

      <div
          v-if="settings.feature_coupons || settings.feature_vouchers"
          class="card card-border bg-base-100 mb-3"
      >
        <div class="card-body">
          <div v-if="settings.feature_coupons" class="join">
            <input v-model="cart.coupon" type="text" class="input" placeholder="Промокод"/>
            <button
                class="btn"
                :disabled="!cart.coupon"
                @click="cart.applyCoupon"
            >Применить</button>
          </div>

          <div v-if="settings.feature_vouchers" class="join">
            <input v-model="cart.voucher" type="text" class="input" placeholder="Подарочный сертификат"/>
            <button
                class="btn"
                :disabled="!cart.voucher"
                @click="cart.applyVoucher"
            >Применить</button>
          </div>
        </div>
      </div>

      <div class="btn-checkout fixed px-4 pt-4 left-0 w-full z-50 flex justify-end items-center gap-2">
        <button
            class="btn btn-primary select-none shadow-xl"
            :disabled="cart.canCheckout === false"
            @click="goToCheckout"
        >
          Перейти к оформлению
        </button>
      </div>
    </div>

    <div
        v-else
        class="text-center rounded-2xl"
    >
      <div class="text-5xl mb-4">🛒</div>
      <p class="text-lg mb-3">{{ settings.texts.text_empty_cart }}</p>
      <RouterLink class="btn btn-primary" to="/">Начать покупки</RouterLink>
    </div>
  </BaseViewWrapper>
</template>

<script setup>
import { useCartStore } from '../stores/CartStore.js'
import Quantity from "@/components/Quantity.vue";
// import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
import OptionRadio from "@/components/ProductOptions/Cart/OptionRadio.vue";
import OptionCheckbox from "@/components/ProductOptions/Cart/OptionCheckbox.vue";
import OptionText from "@/components/ProductOptions/Cart/OptionText.vue";
import {computed, onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useSettingsStore} from "@/stores/SettingsStore.js";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
import BaseViewWrapper from "@/views/BaseViewWrapper.vue";

const route = useRoute();
const yaMetrika = useYaMetrikaStore();
const cart = useCartStore();
const router = useRouter();
const settings = useSettingsStore();

// const componentMap = {
//   radio: OptionRadio,
//   select: OptionRadio,
//   checkbox: OptionCheckbox,
//   text: OptionText,
//   textarea: OptionText,
// };

const lastTotal = computed(() => {
  return cart.totals.at(-1) ?? null;
});

function removeItem(cartItem, cartId, index) {
  cart.removeItem(cartItem, cartId, index);
  window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
}

function goToCheckout() {
  router.push({name: 'checkout'});
}

onMounted(async () => {
  window.document.title = 'Корзина покупок';
  yaMetrika.pushHit(route.path, {
    title: 'Корзина покупок',
  });
  yaMetrika.reachGoal(YA_METRIKA_GOAL.VIEW_CART);
});
</script>

<style scoped>
.btn-checkout {
  bottom: calc(var(--spacing, 0px) * 22 + var(--tg-safe-area-inset-bottom, 0px))
}
</style>