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

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

const productServiceStore = useProductServiceStore();
const optionStore = useOptionStore();

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

defineProps<{
  workIndex: number;
  length: number;
  index: number;
  readonly?: boolean;
}>();

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;
}>();
</script>
<template>
  <div class="bordered rounded">
    <q-expansion-item
      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"
              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"
              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"
              class="col rounded 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('workNo') }} {{ index + 1 }} :
                <span class="app-text-muted-2">
                  {{ workName ? workName : $t('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('workName') }}
                    <q-btn
                      dense
                      unelevated
                      class="bordered q-px-sm"
                      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('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"
              color="negative"
              @click.stop="$emit('deleteWork')"
              style="margin-inline: 12px"
            >
              <q-tooltip>{{ $t('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('propertiesInWork') }} {{ workIndex + 1 }}</span>
            <q-btn
              v-if="!readonly"
              id="btn-add-work-product"
              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))"
              />
              {{ $t('properties') }}
            </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-py-md q-px-sm q-gutter-sm"
            >
              <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('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('productInWork') }} {{ workIndex + 1 }}</span>
            <q-btn
              v-if="!readonly"
              id="btn-add-work-product"
              flat
              dense
              icon="mdi-plus"
              :label="$t('serviceAddProduct')"
              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-9 no-wrap" v-if="productItems">
                  <q-btn
                    v-if="!readonly"
                    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"
                    id="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-mx-lg"
                    style="background-color: var(--surface-tab)"
                  >
                    {{ index + 1 }}
                  </q-avatar>

                  <div class="row no-wrap">
                    <div class="bordered q-mx-md col-3 image-box">
                      <q-img
                        src="blank-image.png"
                        style="object-fit: cover; width: 100%; height: 100%"
                      ></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'}`"
                      >
                        {{
                          $i18n.locale === 'en-US'
                            ? product.nameEn
                            : product.name
                        }}
                        <q-tooltip>
                          {{
                            $i18n.locale === 'en-US'
                              ? product.nameEn
                              : product.name
                          }}
                        </q-tooltip>
                      </span>
                      <div
                        class="bordered q-px-sm"
                        style="border-radius: 6px; max-width: 60px"
                      >
                        {{ product.code }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row justify-end text-right col-3 q-pr-sm">
                  <span
                    class="col-12 text-weight-bold text-h6"
                    style="color: var(--teal-9)"
                  >
                    ฿ {{ formatNumberDecimal(product.price, 2) }}
                  </span>
                  <span class="col-9 text-caption app-text-muted-2">
                    {{ $t('processTime') }}
                  </span>
                  <span class="col-3 text-caption app-text-muted-2">
                    {{ product.process }} {{ $t('day') }}
                  </span>
                </div>
              </div>

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

: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;
}
</style>
