<script setup lang="ts">
import { ref } from 'vue';
import { dateFormat } from 'src/utils/datetime';

import { formatNumberDecimal } from 'stores/utils';
import KebabAction from '../shared/KebabAction.vue';

import { ServiceAndProduct } from 'stores/product-service/types';

const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);

withDefaults(
  defineProps<{
    data?: ServiceAndProduct;
    title?: string;

    dense?: boolean;
    outlined?: boolean;
    readonly?: boolean;
    separator?: boolean;
    typeProduct?: string;

    isAddProduct?: boolean;
    action?: boolean;

    index?: number;
    isDisabled?: boolean;

    noTimeImg?: boolean;

    priceDisplay?: {
      price: boolean;
      agentPrice: boolean;
      serviceCharge: boolean;
    };
  }>(),
  {
    action: false,
  },
);
</script>

<template>
  <div
    bordered
    :class="{ 'is-add-product': isAddProduct }"
    class="column bordered rounded q-pa-sm no-wrap surface-1"
    style="height: 20rem"
    @click="$emit('select', data)"
  >
    <div class="row flex justify-between text-bold">
      <div class="col ellipsis" :class="{ inactive: isDisabled }">
        {{ title ?? 'title' }}
        <q-tooltip anchor="bottom start" self="top left" :delay="300">
          {{ title ?? 'title' }}
        </q-tooltip>
      </div>
      <div
        v-if="action"
        class="col-1 relative-position"
        style="left: 0px; bottom: 0px"
      >
        <KebabAction
          :id-name="title"
          :status="data?.status"
          class="absolute-top-right"
          @view="$emit('menuViewDetail')"
          @edit="$emit('menuEdit')"
          @delete="$emit('menuDelete')"
          @change-status="$emit('toggleStatus', data?.id)"
        />
      </div>

      <q-avatar
        v-if="isAddProduct"
        :style="`background-color: var(${data?.type === 'product' ? '--teal-10' : '--orange-5'})`"
        size="18px"
        text-color="white"
      >
        {{ (index ?? 0) + 1 }}
      </q-avatar>
    </div>

    <div :class="{ inactive: isDisabled }" class="column col full-width">
      <div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
      <div class="flex justify-start text-bold">
        <div
          v-if="data?.type === 'service'"
          class="bordered q-pa-xs row surface-0"
          style="font-size: 12px; border-radius: 5px; width: 80px"
        >
          <div class="col ellipsis-2-lines">
            {{ $t('productService.service.work') }}
          </div>
          <q-space />
          <div class="col text-center">{{ data?.work.length }}</div>
        </div>
      </div>

      <div v-if="data?.type === 'product'" class="flex full-width">
        <div
          class="row full-width text-right"
          style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
        >
          <div class="col" v-if="priceDisplay?.price">
            {{ $t('productService.product.salePrice') }}
          </div>
          <div class="col" v-if="priceDisplay?.agentPrice">
            {{ $t('productService.product.agentPrice') }}
          </div>
          <div class="col" v-if="priceDisplay?.serviceCharge">
            {{ $t('productService.product.processingPrice') }}
          </div>
        </div>

        <div
          class="row full-width text-right items-center"
          style="margin-top: -5px"
        >
          <div
            class="col text-weight-bold"
            style="font-size: 14px; color: hsl(var(--orange-5-hsl))"
            v-if="priceDisplay?.price"
          >
            ฿{{ formatNumberDecimal(data?.price, 2) }}
          </div>
          <div
            class="col text-weight-bold"
            style="font-size: 14px; color: hsl(var(--purple-9-hsl))"
            v-if="priceDisplay?.agentPrice"
          >
            ฿{{ formatNumberDecimal(data?.agentPrice, 2) }}
          </div>
          <div
            class="col"
            style="font-size: 12px; color: hsl(var(--pink-7-hsl))"
            v-if="priceDisplay?.serviceCharge"
          >
            ฿{{ formatNumberDecimal(data?.serviceCharge, 2) }}
          </div>
        </div>
      </div>

      <q-img
        class="col rounded q-my-md items-center justify-center flex"
        style="background-color: transparent"
        loading="lazy"
        :src="
          `${baseUrl}/${data?.type}/${data?.id}/image/${data?.selectedImage}`.concat(
            noTimeImg ? '' : `?ts=${Date.now()}`,
          )
        "
      >
        <template #error>
          <div
            class="full-width full-height items-center justify-center flex"
            :class="{
              card__green: data?.type === 'product',
              card__orange: data?.type === 'service',
            }"
          >
            <q-img
              ratio="1"
              :src="
                data?.type === 'product'
                  ? '/images/product-avatar.png'
                  : '/images/service-avatar.png'
              "
              width="10rem"
              style="bottom: 9%"
            />
          </div>
        </template>
      </q-img>

      <div class="row justify-between items-center q-mb-xs">
        <div class="q-pr-md" v-if="data?.type === 'service'">
          <q-icon
            name="mdi-calendar-month"
            class="surface-0 rounded q-pa-xs app-text-muted"
            size="20px"
          />
          {{ dateFormat(data?.createdAt) }}
        </div>

        <div class="q-pr-md" v-if="data?.type === 'product'">
          <q-icon
            name="mdi-clock-outline"
            class="surface-0 rounded q-pa-xs app-text-muted"
            size="20px"
          />
          {{ data?.process }} {{ $t('general.day') }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.inactive {
  opacity: 0.4;
}

.is-add-product {
  border-color: var(--green-10);
}

.card__green {
  background-color: hsla(var(--teal-10-hsl) / 0.1);

  &.dark {
    background-color: hsla(var(--teal-7-hsl) / 0.1);
  }
}

.card__orange {
  background-color: hsla(var(--orange-5-hsl) / 0.1);

  &.dark {
    background-color: hsla(var(--orange-8-hsl) / 0.1);
  }
}
</style>
