<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 { $numtoString } = useNuxtApp();

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

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

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

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

const showModal = ref();

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

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

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

<template>
  <div>
    <!-- <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> -->
    <CartTabs />
    <div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white is-clipped">
      <div
        class="grid"
        style="row-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
                />
              </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">
            <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">
            <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="email"
                            :value="activeCart.customer__fullname"
                            placeholder="Name"
                            disabled
                          />
                        </p>
                      </div>
                      <div>
                        <label class="label is-small">SĐT</label>
                        <p class="control">
                          <input
                            class="input is-small"
                            type="email"
                            :value="activeCart.customer__phone"
                            placeholder="Phone"
                            disabled
                          />
                        </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"
                        @update="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-light 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 class="card">
            <div class="card-content">
              <p class="icon-text fs-16 font-semibold mb-4">Tổng cộng</p>
              <div>
                <table class="table is-fullwidth fs-13">
                  <tbody>
                    <tr>
                      <td>
                        <span>Tạm tính</span>
                        <span> ({{ activeCartItems?.length || 0 }} sản phẩm)</span>
                      </td>
                      <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
                    </tr>
                    <tr>
                      <td class="font-bold fs-14">Tổng cộng</td>
                      <td class="has-text-right has-text-success-35 font-bold fs-17">
                        {{ $numtoString(subtotal, { hasUnit: true }) }}
                      </td>
                    </tr>
                  </tbody>
                </table>
                <button
                  @click="openConfirmModal"
                  :disabled="!isOrderValid"
                  class="button is-fullwidth is-success"
                >
                  Thanh toán
                </button>
              </div>
            </div>
          </div>
        </div>
      </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);
  border-bottom-left-radius: var(--bulma-radius);
  border-bottom-right-radius: var(--bulma-radius);
}
.sidebar {
  border-left: 1px solid var(--bulma-border);
  border-top: none;

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