<script setup lang="ts">
import { dateFormat } from 'src/utils/datetime';
import { Status } from 'stores/types';
import ToggleButton from '../button/ToggleButton.vue';
withDefaults(
  defineProps<{
    title?: string;
    subtitle?: string;
    color?: string;
    status?: Status;
    date?: Date;
    isType?: boolean;
    id?: string;
    isDisabled?: boolean;
    countType?: number;
    countProduct?: number;
    countService?: number;
  }>(),
  {
    color: 'var(--brand-1)',
  },
);
</script>

<template>
  <div
    :id="`enter-${title}`"
    class="full-width rounded q-pa-sm"
    @click="
      () => {
        $emit('onClick');
      }
    "
    :class="{
      'hover-card': !isDisabled,
    }"
    :style="`border: 1px solid hsla(var(--gray-7-hsl) / ${isDisabled ? 0.1 : 0.3})`"
  >
    <div
      class="relative-position rounded q-pb-lg"
      :style="`background-color:hsla(${color}/.2)`"
    >
      <div class="row justify-between items-center">
        <q-avatar
          round
          icon="mdi-folder"
          size="48px"
          class="q-my-md q-ml-md"
          :class="{ 'disabled-card': isDisabled }"
          :style="`color:hsl(${color});background-color:var(--surface-1) `"
        />

        <q-btn
          flat
          round
          padding="sm"
          class="absolute-top-right dots-btn"
          icon="mdi-dots-vertical"
          style="z-index: 99; position: absolute; opacity: 1"
          size="sm"
          @click.stop=""
        >
          <q-menu class="bordered">
            <q-list v-close-popup>
              <q-item
                clickable
                dense
                class="row q-py-sm"
                style="white-space: nowrap"
                @click="
                  () => {
                    $emit('viewCard');
                  }
                "
              >
                <q-icon
                  name="mdi-eye-outline"
                  class="col-3"
                  size="xs"
                  style="color: hsl(var(--green-6-hsl))"
                />
                <span class="col-9 q-px-md flex items-center">
                  {{ $t('viewDetail') }}
                </span>
              </q-item>
              <q-item
                v-if="!isDisabled"
                dense
                clickable
                class="row q-py-sm"
                style="white-space: nowrap"
                @click="
                  () => {
                    $emit('updateCard');
                  }
                "
                v-close-popup
              >
                <q-icon
                  name="mdi-pencil-outline"
                  class="col-3"
                  size="xs"
                  style="color: hsl(var(--cyan-6-hsl))"
                />
                <span class="col-9 q-px-md flex items-center">
                  {{ $t('edit') }}
                </span>
              </q-item>
              <q-item
                v-if="!isDisabled"
                dense
                clickable
                @click="
                  () => {
                    $emit('deleteCard');
                  }
                "
                v-close-popup
              >
                <q-icon
                  name="mdi-trash-can-outline"
                  size="xs"
                  class="col-3 app-text-negative"
                />
                <span class="col-9 q-px-md flex items-center">
                  {{ $t('delete') }}
                </span>
              </q-item>
              <q-item dense>
                <q-item-section class="q-py-sm">
                  <div class="q-pa-sm surface-2 rounded flex items-center">
                    <ToggleButton
                      two-way
                      @click="$emit('toggleStatus', id)"
                      :model-value="!isDisabled"
                    />
                    <span class="q-pl-md">
                      {{
                        !isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
                      }}
                    </span>
                  </div>
                </q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </div>

      <div class="q-px-md" :class="{ 'disabled-card': isDisabled }">
        <div class="text-subtitle1 text-bold">{{ title }}</div>
        <div class="text-subtitle3 app-text-muted">{{ subtitle }}</div>
        <div class="row q-gutter-md q-mt-sm">
          <div
            v-if="!isType"
            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
            style="border-radius: 5px"
          >
            <div><q-icon name="mdi-folder-table" /></div>
            <div>{{ countType }}</div>
          </div>
          <div
            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
            style="border-radius: 5px"
          >
            <div><q-icon name="mdi-server-network" /></div>
            <div>{{ countService }}</div>
          </div>
          <div
            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
            style="border-radius: 5px"
          >
            <div><q-icon name="mdi-shopping" /></div>
            <div>{{ countProduct }}</div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="q-pt-lg q-pb-sm row justify-between"
      :class="{ 'disabled-card': isDisabled }"
    >
      <div class="flex items-center">
        <q-icon
          size="xs"
          name="mdi-calendar-month"
          class="q-mr-sm rounded q-pa-xs"
          style="color: var(--stone-6); background-color: var(--surface-3)"
        />
        {{ dateFormat(date) }}
      </div>
      <q-btn
        @click.stop="
          () => {
            $emit('viewCard');
          }
        "
        unelevated
        class="q-px-sm"
        :label="$t('detail')"
        style="
          background-color: hsla(var(--blue-5-hsl) / 0.1);
          color: var(--blue-5);
        "
      >
        <q-icon
          size="xs"
          name="mdi-chevron-right"
          class="rounded"
          style="color: var(--blue-5)"
        />
      </q-btn>
    </div>
  </div>
</template>

<style scoped>
.sub-card {
  background-color: var(--surface-0);
  border-radius: 0 0 var(--radius-2) var(--radius-2);
  font-size: 16px;
}

.hover-card:hover {
  cursor: pointer;
  opacity: 0.8;
  box-shadow: var(--shadow-3);
}

.disabled-card {
  opacity: 0.4;

  cursor: pointer;
}
</style>
