<script setup>

import UserSubPageWrapper from "@/views/dashboards/superUserDashboard/user/UserSubPageWrapper.vue";
import PageTitle from "@/components/global/PageTitle.vue";
import { useRouter } from 'vue-router'
import { user, getUserData, userId, setUser, getUserProductDiscount, getUserGlobalDiscount, getProductBestApplicableDiscount, getUserProductOnlyDiscount, getProductCategory, getUserCategoryDiscount, isProductAllowedToApplyCategoryDiscounts } from "@/views/dashboards/superUserDashboard/user/SuperUserSelectedUserObject.vue";
import { getProducts } from "@/components/shop/Products.vue";
import { ref } from 'vue';
import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
import Swal from "sweetalert2";

// Get the user from the route
const router = useRouter()

// Set the user
setUser(router.currentRoute.value.params.userId);

// Set the products
const products = ref([]);

// Get the products
getProducts().then((response) => {
  products.value = response.data.data;
});

// Edit the discount
const editDiscount = (product, isCategory) => {
  const discount = getUserProductDiscount(product, isCategory, isCategory);
  const productOrCategoryId = isCategory ? product.category : product.id;
  Swal.fire({
    title: (isCategory ? productOrCategoryId : product.name) + ' ( ' + (isCategory ? 'category' : 'product') + ': ' + product.id + ' )',
    input: 'number',
    inputValue: discount,
    inputLabel: 'Discount (%)',
    inputAttributes: {
      autocapitalize: 'off'
    },
    showCancelButton: true,
    confirmButtonText: 'Save',
    showLoaderOnConfirm: true,
    preConfirm: (discount) => {
      return authenticatedRequest(`/superuser/user/discounts`, "POST", {
        user_id: userId.value,
        object_id: productOrCategoryId,
        discount: discount,
        is_category: isCategory
      })
          .then((response) => {
            console.log(response);
            getUserData();
          })
          .catch((error) => {
            console.log(error);
          });
    },
    allowOutsideClick: () => !Swal.isLoading()
  });
}
</script>

<template>
  <UserSubPageWrapper>
    <template #title>
      <PageTitle title="User" subtitle="Pricing" />
    </template>
    <div>
      <p>User ID: {{ userId }} (Customer number: {{ user.customer_number }})</p>
      <p>Global rabat, hentet fra E-conomic: <strong>{{ getUserGlobalDiscount() }}%</strong></p>
      <!-- Products -->
      <table class="table is-fullwidth is-striped is-narrow is-hoverable is-fullwidth is-bordered mt-2">
        <thead>
          <tr>
            <th>Product ID</th>
            <th>Category</th>
            <th>Product name</th>
            <th>Price</th>
            <th>Discount (Item)</th>
            <th>Discount (Category)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="product in products">
            <td>{{ product.id }}</td>
            <td>{{ getProductCategory(product)}}</td>
            <td>{{ product.name }}</td>
            <!-- Price -->
            <td v-if="getProductBestApplicableDiscount(product) === 0">{{ product.price }} Kr.</td>
            <td v-else>{{ (product.price - (product.price * (getProductBestApplicableDiscount(product) / 100))).toFixed(0) }} Kr. ({{ getProductBestApplicableDiscount(product) }}% rabat)</td>

            <!-- Discount: Item -->
            <td
                class="is-clickable"
                @click="editDiscount(product, false)"
                v-if="getUserProductOnlyDiscount(product) > 0"
            >{{ getUserProductOnlyDiscount(product) }} %
              <i class="is-pulled-right fas fa-edit"></i>
            </td>
            <td
                class="is-clickable"
                @click="editDiscount(product, false)"
                v-else>- <i class="is-pulled-right fas fa-edit"></i>
            </td>
            <!-- Discount: Category -->
            <td
                class="is-clickable"
                @click="editDiscount(product, true)"
                v-if="getUserCategoryDiscount(getProductCategory(product)) > 0">{{ getUserCategoryDiscount(getProductCategory(product)) }} % {{ isProductAllowedToApplyCategoryDiscounts(product) ? ' ' : ' - Disabled for item. ' }}
              <i class="is-pulled-right fas fa-edit"></i>
            </td>
            <td
                class="is-clickable"
                @click="editDiscount(product, 1)"
                v-else>- <i class="is-pulled-right fas fa-edit"></i>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </UserSubPageWrapper>
</template>

<style scoped>

</style>