<script lang="ts" setup>
import { Icon } from '@iconify/vue';
import { formatNumberDecimal } from 'stores/utils';

import useProductServiceStore from 'stores/product-service';
import useOptionStore from 'stores/options';
import { Attributes, ProductList } from 'stores/product-service/types';
import { storeToRefs } from 'pinia';
import { ref, watch } from 'vue';

const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
const productServiceStore = useProductServiceStore();
const optionStore = useOptionStore();

const { fetchListOfWork } = productServiceStore;
const { workNameItems } = storeToRefs(productServiceStore);

withDefaults(
  defineProps<{
    workIndex: number;
    length: number;
    index: number;
    readonly?: boolean;

    priceDisplay?: {
      price: boolean;
      agentPrice: boolean;
      serviceCharge: boolean;
    };
  }>(),
  {
    priceDisplay: () => ({
      price: true,
      agentPrice: true,
      serviceCharge: true,
    }),
  },
);

const workName = defineModel<string>('workName');
const attributes = defineModel<Attributes>('attributes', { required: true });
const productItems = defineModel<(ProductList & { nameEn: string })[]>(
  'productItems',
  {
    required: true,
  },
);

defineEmits<{
  (e: 'moveWorkUp'): void;
  (e: 'moveWorkDown'): void;
  (e: 'deleteWork'): void;
  (e: 'addProduct'): void;
  (e: 'moveProductUp', items: unknown[], index: number): void;
  (e: 'moveProductDown', items: unknown[], index: number): void;
  (e: 'deleteProduct', items: unknown[], index: number): void;

  (e: 'manageWorkName'): void;
  (e: 'workProperties'): void;
}>();

watch(
  () => workNameItems.value,
  (c, o) => {
    const list = c.map((v: { name: string }) => v.name);
    const oldList = o.map((v: { name: string }) => v.name);
    const index = oldList.indexOf(workName.value);

    if (list[index] !== oldList[index] && !list.includes(workName.value)) {
      if (list.length - 1 === index - 1) workName.value = list[index - 1];
      else workName.value = list[index];
    }
  },
);
</script>
<template>
  <div class="bordered rounded">
    <q-expansion-item
      for="item-up"
      id="item-up"
      dense
      switch-toggle-side
      default-opened
      expand-icon="mdi-chevron-down-circle"
      header-class="surface-2 expansion-rounded"
      header-style="border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2)"
    >
      <template v-slot:header>
        <div class="column full-width">
          <div class="row items-center q-py-sm full-width" @click.stop>
            <q-btn
              v-if="!readonly"
              id="btn-work-up-product"
              for="btn-work-up-product"
              icon="mdi-arrow-up"
              dense
              flat
              round
              :disable="index === 0"
              style="color: hsl(var(--text-mute-2))"
              @click.stop="$emit('moveWorkUp')"
            />
            <q-btn
              v-if="!readonly"
              id="btn-work-down-product"
              for="btn-work-down-product"
              icon="mdi-arrow-down"
              dense
              flat
              round
              class="q-mx-sm"
              :disable="index === length - 1"
              style="color: hsl(var(--text-mute-2))"
              @click.stop="$emit('moveWorkDown')"
            />
            <div
              :for="`select-work-name-${index + 1}`"
              class="col q-py-sm q-px-md"
              style="background-color: var(--surface-1); z-index: 2"
              @click="() => (readonly ? '' : fetchListOfWork())"
            >
              <span class="text-body2" style="color: var(--foreground)">
                {{ $t('productService.service.work') }} {{ index + 1 }} :
                <span class="app-text-muted-2">
                  {{
                    workName ? workName : $t('productService.service.workName')
                  }}
                </span>
              </span>
              <q-menu v-if="!readonly" fit anchor="bottom left" self="top left">
                <q-item>
                  <div class="full-width flex items-center justify-between">
                    {{ $t('productService.service.workName') }}
                    <q-btn
                      dense
                      unelevated
                      class="bordered q-px-sm text-capitalize"
                      style="
                        border-radius: var(--radius-2);
                        color: hsl(var(--info-bg));
                      "
                      @click.stop="$emit('manageWorkName')"
                    >
                      <q-icon name="mdi-cog" size="xs" class="q-mr-sm" />
                      {{ $t('general.manage') }}
                    </q-btn>
                  </div>
                </q-item>
                <q-item
                  @click="workName = item.name"
                  clickable
                  v-for="(item, index) in workNameItems"
                  :key="index"
                >
                  <div class="full-width flex items-center">
                    <q-icon
                      v-if="workName === item.name"
                      name="mdi-checkbox-marked"
                      size="xs"
                      color="primary"
                      class="q-mr-sm"
                    />
                    <q-icon
                      v-else
                      name="mdi-checkbox-blank-outline"
                      size="xs"
                      style="color: hsl(var(--text-mute))"
                      class="q-mr-sm"
                    />
                    {{ item.name }}
                  </div>
                </q-item>
              </q-menu>
            </div>
            <q-btn
              v-if="!readonly"
              id="btn-delete-work"
              icon="mdi-trash-can-outline"
              dense
              flat
              round
              padding="0"
              class="q-ml-md"
              color="negative"
              @click.stop="$emit('deleteWork')"
            >
              <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
            </q-btn>
          </div>
        </div>
      </template>

      <div class="surface-2">
        <!-- properties -->
        <div class="bordered-t">
          <div
            class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
            style="background-color: hsla(var(--info-bg) / 0.1)"
          >
            <span>
              {{ $t('productService.service.propertiesInWork') }}
              {{ workIndex + 1 }}
            </span>
            <q-btn
              v-if="!readonly"
              id="btn-add-work-product"
              class="text-capitalize"
              flat
              dense
              padding="0"
              style="color: hsl(var(--info-bg))"
              @click.stop="$emit('workProperties')"
            >
              <Icon
                icon="basil:settings-adjust-solid"
                width="24px"
                class="q-mr-sm"
                style="color: hsl(var(--info-bg))"
              />
              <span v-if="$q.screen.gt.xs">
                {{ $t('productService.service.properties') }}
              </span>
            </q-btn>
          </div>

          <div class="q-py-md q-px-md full-width">
            <div
              v-if="attributes.additional.length > 0"
              class="row items-center full-width surface-1 q-pb-md q-pt-sm q-px-sm q-gutter-sm scroll"
              :style="$q.screen.xs ? 'max-height: 100px' : ''"
            >
              <div
                v-for="(p, index) in attributes.additional"
                :key="index"
                class="bordered q-px-sm surface-3"
                style="border-radius: 6px"
              >
                {{ optionStore.mapOption(p.fieldName ?? '') }}
              </div>
            </div>
            <div v-else class="app-text-muted">
              {{ $t('productService.service.noProperties') }}
            </div>
          </div>
        </div>

        <!-- product -->
        <div class="bordered-t">
          <div
            class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
            style="background-color: hsla(var(--info-bg) / 0.1)"
          >
            <span>
              {{ $t('productService.service.productInWork') }}
              {{ workIndex + 1 }}

              <q-checkbox
                size="xs"
                :class="$q.screen.gt.xs ? 'q-pl-lg' : 'q-pl-sm'"
                v-model="attributes.showTotalPrice"
                :label="$t('productService.service.showTotalPrice')"
                style="color: hsl(var(--text-mute-2))"
                :disable="readonly"
              />
            </span>
            <q-btn
              v-if="!readonly"
              id="btn-add-work-product"
              for="btn-add-work-product"
              flat
              dense
              icon="mdi-plus"
              class="text-capitalize"
              :label="
                $q.screen.gt.xs ? $t('productService.product.addTitle') : ''
              "
              padding="0"
              style="color: hsl(var(--info-bg))"
              @click.stop="$emit('addProduct')"
            />
          </div>

          <div
            v-if="productItems.length > 0"
            class="q-py-md q-px-md full-width q-gutter-y-sm"
          >
            <div
              v-for="(product, index) in productItems"
              :key="product.id"
              class="full-width row items-center justify-between"
            >
              <div
                class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
              >
                <div
                  class="row items-center col-md col-12 no-wrap"
                  v-if="productItems"
                >
                  <q-btn
                    v-if="!readonly && $q.screen.gt.xs"
                    id="btn-product-up"
                    icon="mdi-arrow-up"
                    dense
                    flat
                    round
                    :disable="index === 0"
                    style="color: hsl(var(--text-mute-2))"
                    @click.stop="$emit('moveProductUp', productItems, index)"
                  />
                  <q-btn
                    v-if="!readonly && $q.screen.gt.xs"
                    id="btn-product-down"
                    for="btn-product-down"
                    icon="mdi-arrow-down"
                    dense
                    flat
                    round
                    class="q-mx-sm"
                    :disable="index === productItems.length - 1"
                    style="color: hsl(var(--text-mute-2))"
                    @click.stop="$emit('moveProductDown', productItems, index)"
                  />

                  <q-avatar
                    size="md"
                    :class="$q.screen.gt.xs ? 'q-mx-lg' : 'q-mr-lg'"
                    style="background-color: var(--surface-tab)"
                  >
                    {{ index + 1 }}
                  </q-avatar>

                  <div class="row no-wrap">
                    <div
                      v-if="$q.screen.gt.xs"
                      class="bordered q-mx-md col-3 image-box"
                    >
                      <q-img
                        :src="`${baseUrl}/product/${product?.id}/image`"
                        style="object-fit: cover; width: 100%; height: 100%"
                      >
                        <template #error>
                          <div
                            class="surface-3 full-width full-height no-padding"
                          >
                            <q-img src="blank-image.png"></q-img>
                          </div>
                        </template>
                      </q-img>
                    </div>
                    <div class="column col justify-between">
                      <span
                        class="text-weight-bold ellipsis-2-lines"
                        :style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
                      >
                        {{ product.name }}
                        <q-tooltip>
                          {{ product.name }}
                        </q-tooltip>
                      </span>
                      <div
                        class="bordered q-px-xs ellipsis"
                        style="border-radius: 6px; max-width: 100px"
                      >
                        {{ product.code }}
                      </div>
                    </div>
                  </div>
                </div>

                <div
                  class="row justify-end text-right col-md-6 col-12"
                  :class="$q.screen.xs ? 'q-mt-sm text-caption' : 'q-pr-sm'"
                >
                  <span
                    class="col-12 row"
                    :class="{ 'q-col-gutter-md': $q.screen.gt.xs }"
                    style="color: var(--teal-9)"
                  >
                    <span
                      v-if="priceDisplay?.price"
                      class="col ellipsis price-orange text-weight-bold"
                    >
                      <div class="text-caption app-text-muted-2">
                        {{ $t('productService.product.salePrice') }}
                      </div>
                      ฿{{ formatNumberDecimal(product.price, 2) }}
                      <q-tooltip
                        anchor="bottom right"
                        self="center right"
                        :delay="300"
                      >
                        ฿{{ formatNumberDecimal(product.price, 2) }}
                      </q-tooltip>
                    </span>
                    <span
                      v-if="priceDisplay?.agentPrice"
                      class="col ellipsis price-purple text-weight-bold"
                    >
                      <div class="text-caption app-text-muted-2">
                        {{ $t('productService.product.agentPrice') }}
                      </div>
                      ฿{{ formatNumberDecimal(product.agentPrice, 2) }}
                      <q-tooltip
                        anchor="bottom right"
                        self="center right"
                        :delay="300"
                      >
                        ฿{{ formatNumberDecimal(product.agentPrice, 2) }}
                      </q-tooltip>
                    </span>
                    <span
                      v-if="priceDisplay?.serviceCharge"
                      class="col ellipsis price-pink column"
                    >
                      <div class="text-caption app-text-muted-2">
                        {{ $t('productService.product.processingPrice') }}
                      </div>
                      ฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
                      <q-tooltip
                        anchor="bottom right"
                        self="center right"
                        :delay="300"
                      >
                        ฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
                      </q-tooltip>
                    </span>
                  </span>

                  <span class="col-9 q-mt-sm text-caption app-text-muted-2">
                    {{ $t('productService.product.processingTime') }}
                  </span>
                  <span class="col-3 q-mt-sm text-caption app-text-muted-2">
                    {{ product.process }} {{ $t('general.day') }}
                  </span>
                </div>
              </div>

              <q-btn
                v-if="!readonly"
                class="q-ml-md"
                id="btn-delete-work-product"
                for="btn-delete-work-product"
                icon="mdi-trash-can-outline"
                padding="0"
                dense
                flat
                round
                color="negative"
                @click.stop="$emit('deleteProduct', productItems, index)"
              >
                <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
              </q-btn>
            </div>
          </div>
          <div v-else class="app-text-muted q-py-md q-px-lg">
            {{ $t('productService.product.noProduct') }}
          </div>
        </div>
      </div>
    </q-expansion-item>
    <div class="q-py-sm q-px-md bordered-t row items-center justify-between">
      <div>
        {{ $t('productService.service.totalProductWork') }}
        <span class="app-text-muted-2">
          {{ workName }}
        </span>
      </div>
      <div>
        {{ productItems?.length ?? 0 }} {{ $t('productService.service.list') }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.image-box {
  height: 70px;
  width: 70px;
  border-color: var(--teal-9);
  border-radius: 10px;
  background-color: var(--surface-3);
  overflow: hidden;
}

:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
  color: var(--brand-1);
}

:deep(
    .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
  ) {
  justify-content: start !important;
  padding-right: 8px !important;
  padding-top: 16px;
  min-width: 0px;
}

.price-orange {
  color: var(--orange-5);
  &.dark {
    color: var(--orange-6);
  }
}

.price-purple {
  color: var(--violet-11);
  &.dark {
    color: var(--violet-10);
  }
}

.price-pink {
  color: var(--pink-6);
}
</style>
