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

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

const workName = defineModel<string>('workName');
const productItems = defineModel<
  {
    id: string;
    label: string;
    labelEn: string;
    code: string;
    price: number;
    time: 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;
}>();
</script>
<template>
  <div class="bordered rounded">
    <q-expansion-item
      dense
      switch-toggle-side
      default-opened
      expand-icon="mdi-chevron-down-circle"
    >
      <template v-slot:header>
        <div class="row items-center q-py-sm full-width" @click.stop>
          <q-btn
            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
            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')"
          />
          <q-input
            for="input-work-name"
            dense
            outlined
            borderless
            class="col"
            hide-bottom-space
            :placeholder="$t('workName')"
            v-model="workName"
            :input-style="'color: hsl(var(--text-mute-2))'"
            style="background-color: var(--surface-1)"
          >
            <template #prepend>
              <q-btn
                dense
                unelevated
                round
                padding="0"
                style="background-color: var(--surface-tab)"
              >
                <Icon
                  icon="basil:settings-adjust-solid"
                  width="24px"
                  style="color: var(--stone-7)"
                />
              </q-btn>
              <span class="text-body2 q-pl-sm" style="color: var(--foreground)">
                {{ $t('workNo') }} {{ index + 1 }} :
              </span>
            </template>
          </q-input>
          <q-btn
            id="btn-delete-work"
            icon="mdi-trash-can-outline"
            dense
            flat
            round
            padding="0"
            color="negative"
            class="q-ml-sm"
            @click.stop="$emit('deleteWork')"
          />
        </div>
      </template>
      <div class="surface-2">
        <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
            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 class="q-py-md q-px-lg 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
                  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
                  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.labelEn
                          : product.label
                      }}
                      <q-tooltip>
                        {{
                          $i18n.locale === 'en-US'
                            ? product.labelEn
                            : product.label
                        }}
                      </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">
                <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.time }} {{ $t('day') }}
                </span>
              </div>
            </div>

            <q-btn
              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>
    </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
  ) {
  padding-right: 8px !important;
  min-width: 0px;
}
</style>
