<script setup>
import Address from "~/components/pos/Address.vue";
import CartItem from "~/components/pos/CartItem.vue";
import CartTabs from "~/components/pos/CartTabs.vue";
import useActiveCart from "~/components/pos/composables/useActiveCart";
import useCartData from "~/components/pos/composables/useCartData";
import useCustomer from "~/components/pos/composables/useCustomer";
import useOrderInfo from "~/components/pos/composables/useOrderInfo";
import SearchBox from "~/components/SearchBox.vue";

const store = useStore();
const { $insertapi, $formatNum } = useNuxtApp();

const { carts, cartItems, customers, getCarts, isPending } = useCartData();

const { activeCartId, activeCart, activeCartItems, customerIdsWithNoCart, subtotal, invalidCartItems } = useActiveCart({
  carts,
  cartItems,
  customers,
});

const { addresses, getAddresses, isChangingCus, changeCustomer } = useCustomer({ activeCart, getCarts });

const { orderInfo, isOrderValid, fullAddress, total } = useOrderInfo({
  activeCartId,
  activeCart,
  activeCartItems,
  addresses,
  getAddresses,
  subtotal,
});

const showModal = ref();

function openProductSelectionModal() {
  showModal.value = {
    component: "pos/ProductSelection",
    title: "Chọn sản phẩm",
    width: "85%",
    height: "100%",
  };
}

function openConfirmModal() {
  showModal.value = {
    component: "pos/ConfirmOrder",
    title: "Xác nhận đơn hàng",
    width: "700px",
  };
}

function openAddAddressModal() {
  showModal.value = {
    component: "pos/AddressForm",
    title: "Thêm địa chỉ",
    width: "50%",
    height: "auto",
  };
}
provide("pos", {
  carts,
  activeCartId,
  activeCart,
  activeCartItems,
  invalidCartItems,
  isChangingCus,
  orderInfo,
  fullAddress,
  getCarts,
  subtotal,
  total,
});
</script>

<template>
  <div class="is-flex-grow-1 is-flex is-flex-direction-column">
    <!-- <div class="fs-11">
      <pre>customerIdsWithNoCart: {{ customerIdsWithNoCart }}</pre>
      <pre>{{ customerIdsWithNoCart }}</pre>
      <pre>{{ activeCart }}</pre>
      <pre>{{ JSON.stringify(activeCartItems) }}</pre>
      <pre>{{ JSON.stringify(activeCart) }}</pre>
      <pre>activeCart?.customer: {{ JSON.stringify(activeCart?.customer) }}</pre>
      <pre>{{ orderInfo }}</pre>
    </div> -->
    <template v-if="activeCartId && carts?.length > 0">
      <CartTabs />
      <div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white">
        <div class="grid is-gap-0">
          <div :class="['cell', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-8']">
            <div class="card">
              <div class="card-content">
                <div class="block is-flex is-justify-content-space-between">
                  <p class="icon-text fs-16 font-semibold mb-4">
                    <span class="icon">
                      <Icon
                        name="material-symbols:shopping-cart-outline-rounded"
                        :size="18"
                      />
                    </span>
                    <span>Giỏ hàng</span>
                    <span
                      v-if="isPending"
                      class="icon"
                    >
                      <Icon
                        name="svg-spinners:180-ring-with-bg"
                        :size="18"
                        class="has-text-primary"
                      />
                    </span>
                  </p>
                  <button
                    @click="openProductSelectionModal"
                    class="button is-primary"
                  >
                    <span class="icon">
                      <Icon
                        name="material-symbols:add-rounded"
                        :size="20"
                      />
                    </span>
                    <span>Thêm sản phẩm</span>
                  </button>
                </div>
                <div
                  v-if="activeCartItems?.length > 0"
                  class="is-flex is-flex-direction-column is-gap-1"
                >
                  <CartItem
                    v-for="cartItem in activeCartItems"
                    :key="cartItem.id"
                    :cartItem="cartItem"
                    deleteable
                    :invalid="invalidCartItems.find((ci) => ci.id === cartItem.id)"
                  />
                </div>
                <p
                  v-else
                  class="py-4 fs-16 has-text-centered has-text-grey"
                >
                  Chưa có sản phẩm nào trong giỏ hàng.
                </p>
              </div>
            </div>
          </div>
          <div :class="['cell sidebar', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-4']">
            <div
              class="card"
              style="border-bottom: 1px solid var(--bulma-border)"
            >
              <div class="card-content">
                <p class="icon-text fs-16 font-semibold mb-4">
                  <span class="icon">
                    <Icon
                      name="material-symbols:supervisor-account-outline-rounded"
                      :size="18"
                    />
                  </span>
                  <span>Khách hàng</span>
                </p>
                <div>
                  <SearchBox
                    v-bind="{
                      api: 'customer',
                      // filter: { id__in: [...customerIdsWithNoCart, activeCart?.customer] },
                      field: 'label',
                      column: ['label'],
                      first: true,
                      placeholder: 'Khách hàng',
                      optionid: activeCart?.customer,
                      onOption: (e) => {
                        if (e?.id !== activeCart?.customer) changeCustomer(e?.id || null);
                      },
                      addon: {
                        component: 'customer/CustomerQuickAdd',
                        width: '50%',
                        height: 'auto',
                        title: 'Tạo khách hàng',
                      },
                    }"
                  />
                </div>
              </div>
            </div>
            <div
              class="card"
              style="border-bottom: 1px solid var(--bulma-border)"
            >
              <div class="card-content">
                <p class="icon-text fs-16 font-semibold mb-4">
                  <span class="icon">
                    <Icon
                      name="material-symbols:delivery-truck-speed-outline-rounded"
                      :size="18"
                    />
                  </span>
                  <span>Giao hàng</span>
                </p>
                <div class="block">
                  <SearchBox
                    v-bind="{
                      api: 'Delivery_Method',
                      field: 'name',
                      column: ['name'],
                      first: true,
                      placeholder: 'Phương thức giao hàng',
                      disabled: !activeCart?.customer,
                      optionid: orderInfo.deliveryMethod?.id,
                      onOption: (e) => (orderInfo.deliveryMethod = e),
                    }"
                  />
                </div>
                <template v-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'">
                  <div v-if="activeCart.customer">
                    <div class="block">
                      <p class="mb-2">Thông tin người nhận</p>
                      <div v-if="activeCart.customer">
                        <div class="field">
                          <label class="label is-small">Tên</label>
                          <p class="control">
                            <input
                              class="input is-small"
                              type="text"
                              v-model="orderInfo.receiver_name"
                              placeholder="Tên"
                            />
                          </p>
                        </div>
                        <div>
                          <label class="label is-small">SĐT</label>
                          <p class="control">
                            <input
                              class="input is-small"
                              type="text"
                              v-model="orderInfo.receiver_phone"
                              placeholder="SĐT"
                            />
                          </p>
                        </div>
                      </div>
                    </div>
                    <hr />
                    <div class="block">
                      <p class="mb-2">Địa chỉ giao hàng</p>
                      <div v-if="addresses.length > 0">
                        <Address
                          v-for="address in addresses"
                          :key="address"
                          :address="address"
                          :selected="orderInfo.address?.id === address.id"
                          @selectAddress="orderInfo.address = $event"
                          @submit="getAddresses"
                        />
                      </div>
                      <div
                        v-else
                        class="has-text-centered"
                      >
                        <p class="has-text-grey p-4">Khách hàng chưa có địa chỉ</p>
                        <button
                          @click="openAddAddressModal"
                          class="button is-light is-primary"
                        >
                          <span class="icon">
                            <Icon
                              name="material-symbols:add-home-work-outline-rounded"
                              :size="18"
                            />
                          </span>
                          <span>Thêm địa chỉ</span>
                        </button>
                      </div>
                    </div>
                  </div>
                  <p
                    v-else
                    class="has-text-grey-70 py-4 has-text-centered"
                  >
                    Chưa chọn khách hàng
                  </p>
                </template>
              </div>
            </div>
            <div class="card">
              <div class="card-content">
                <p class="icon-text fs-16 font-semibold mb-4">
                  <span class="icon">
                    <Icon
                      name="material-symbols:credit-card-outline"
                      :size="18"
                    />
                  </span>
                  <span>Thanh toán</span>
                </p>
                <div>
                  <SearchBox
                    v-bind="{
                      api: 'Payment_Method',
                      field: 'name',
                      column: ['name'],
                      first: true,
                      placeholder: 'Phương thức thanh toán',
                      disabled: !activeCart?.customer,
                      optionid: orderInfo.paymentMethod?.id,
                      onOption: (e) => (orderInfo.paymentMethod = e),
                    }"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="card is-radiusless sticky bottom-0"
        style="z-index: 5; /* to be higher than .control > .icon (4) */"
      >
        <div class="card-content py-4">
          <div class="is-flex is-gap-2 is-justify-content-space-between is-align-items-flex-end">
            <table class="table is-fullwidth max-w-4xl fs-13 mb-0">
              <tbody>
                <tr>
                  <td>
                    <span>Tạm tính</span>
                    <span> ({{ activeCartItems?.length || 0 }} sản phẩm)</span>
                  </td>
                  <td class="has-text-right">{{ $formatNum(subtotal, { hasUnit: true }) }}</td>
                </tr>
                <tr>
                  <td>Phí giao hàng</td>
                  <td class="has-text-right">{{ $formatNum(orderInfo.shipping_fee, { hasUnit: true }) }}</td>
                </tr>
                <tr>
                  <td class="font-bold fs-14">Tổng cộng</td>
                  <td class="has-text-right has-text-primary font-bold fs-18">
                    {{ $formatNum(total, { hasUnit: true }) }}
                  </td>
                </tr>
              </tbody>
            </table>
            <button
              @click="openConfirmModal"
              :disabled="!isOrderValid"
              class="button is-primary"
            >
              Thanh toán
            </button>
          </div>
        </div>
      </div>
    </template>
    <div
      v-else
      class="is-flex-grow-1 is-flex is-justify-content-center"
    >
      <div
        v-if="isPending"
        class="is-flex is-justify-content-center is-align-items-center"
      >
        <Icon
          name="svg-spinners:180-ring-with-bg"
          :size="30"
          class="has-text-primary"
        />
      </div>
      <div
        v-else
        class="is-flex is-flex-direction-column is-align-items-center is-gap-2 mt-40"
      >
        <Icon
          name="material-symbols:shopping-cart-outline-rounded"
          :size="40"
          class="has-text-grey-80"
        />
        <p class="has-text-grey-60 fs-17">Chưa có giỏ hàng nào</p>
        <button
          @click="
            async () => {
              const newCart = await $insertapi('Cart', { notify: false });
              activeCartId = newCart.id;
              getCarts();
            }
          "
          class="button is-primary"
        >
          <span class="icon">
            <Icon
              name="material-symbols:add-rounded"
              :size="18"
            />
          </span>
          <span>Tạo giỏ hàng</span>
        </button>
      </div>
    </div>
    <Modal
      v-if="showModal"
      v-bind="showModal"
      @close="showModal = undefined"
    />
  </div>
</template>

<style lang="scss" scoped>
@use "bulma/sass/utilities/mixins.scss" as *;

.cell > .card {
  border-radius: 0;
  border: none;
  margin-bottom: 0;
}

.fixed-grid {
  border: 1px solid var(--bulma-border);
}
.sidebar {
  border-left: 1px solid var(--bulma-border);
  border-top: none;

  @include touch {
    border-left: none;
    border-top: 1px solid var(--bulma-border);
  }
}
</style>
