<script setup lang="ts">
import AppBox from './app/AppBox.vue';

import { CustomerBranch } from 'stores/customer/types';

withDefaults(
  defineProps<{
    noDetail?: boolean;
    noHover?: boolean;
    noBg?: boolean;
    dark?: boolean;
    width?: string;
    color: 'purple' | 'green';
    gridColumns?: number;
    metadata?: { id: string; disabled: boolean };
    list: {
      imageUrl?: string;
      id: string;
      type: 'CORP' | 'PERS';
      name: string;
      code: string;
      detail?: { label: string; value: string }[];
    };
    badge?: CustomerBranch[];
  }>(),
  {
    width: '300px',
    deletable: false,
    color: 'green',
  },
);

defineEmits<{
  (e: 'deleteCard', id: string): void;
  (e: 'updateCard', action: 'FORM' | 'INFO', id: string): void;
  (e: 'viewCard', action: 'FORM' | 'INFO', id: string): void;
  (e: 'enterCard'): void;
  (e: 'toggleStatus', id: string): void;
}>();
</script>

<template>
  <div v-if="metadata">
    <div
      :style="`${noBg ? 'height: 228px' : 'min-height: 310px'}`"
      class="flip"
      :class="{
        'person-box__no-hover': noHover,
      }"
    >
      <AppBox
        no-padding
        class="surface-1 front"
        bordered
        :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color} ${noBg ? 'front__no-bg' : ''}`"
        @click="$emit('enterCard')"
      >
        <q-btn
          flat
          round
          padding="sm"
          class="absolute-top-right dots-btn"
          icon="mdi-dots-vertical"
          style="z-index: 99"
          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', 'INFO', metadata.id)"
              >
                <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
                dense
                clickable
                class="row q-py-sm"
                style="white-space: nowrap"
                @click="$emit('updateCard', 'FORM', metadata.id)"
                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
                dense
                clickable
                @click="$emit('deleteCard', metadata.id)"
                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">
                    <q-toggle
                      dense
                      size="sm"
                      @click="$emit('toggleStatus', metadata.id)"
                      :model-value="!metadata.disabled"
                      val="xs"
                      padding="none"
                    >
                      <div class="q-ml-xs">
                        {{
                          metadata.disabled
                            ? $t('switchOnLabel')
                            : $t('switchOffLabel')
                        }}
                      </div>
                    </q-toggle>
                  </div>
                </q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
        <div class="row justify-center relative-position">
          <q-card-section class="q-pt-md img-decoration">
            <q-avatar size="80px">
              <img :src="list.imageUrl ?? '/no-profile.png'" />
            </q-avatar>
          </q-card-section>
        </div>
        <div class="box-title">
          <div class="rounded title">
            {{
              $t(
                list.type === 'CORP'
                  ? 'customerLegalEntity'
                  : 'customerNaturalPerson',
              )
            }}
          </div>
        </div>
        <q-card-section class="no-padding">
          <div class="column items-center justify-center q-mb-md">
            <div class="row">{{ list.name }}</div>
            <div v-if="!noDetail">
              {{ list.code }}
            </div>
          </div>
        </q-card-section>

        <div v-if="!noDetail">
          <q-separator />
          <div class="front-scroll">
            <q-card-section
              v-for="(d, j) in list.detail"
              :key="j"
              class="overflow q-pt-none"
            >
              <div class="text-caption app-text-muted-2">
                {{ $t(d.label) }}
              </div>
              <div>{{ !d.value ? '-' : d.value }}</div>
            </q-card-section>
          </div>
        </div>
      </AppBox>
    </div>
  </div>
</template>

<style scoped>
.container {
  height: 500px;
}

.flip {
  width: 100%;
  position: relative;
  transition: transform 0.4s;
  transform-style: preserve-3d;
  /* 
  &:not(.person-box__no-hover):hover {
    cursor: pointer;
    transition-delay: 0.3s;
    transform: rotateY(180deg);
  } */
}

.front {
  width: 100%;
  height: 310px;
  position: absolute;
  backface-visibility: hidden;
}

.front {
  --_color: var(--teal-6);
  --_color-dark: var(--_color);
  --_bg-front-scroll: hsla(var(--_color) / 0.05);
  --_bg-back-detail-1: white;
  --_bg-back-detail-2: hsla(var(--_color) / 0.05) !important;

  .img-decoration {
    background: hsl(var(--_color)) !important;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
  }

  .title {
    width: 50%;
    height: 25px;
    background: hsl(var(--_color)) !important;
    position: relative;
    bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }

  .front-scroll {
    background: var(--_bg-front-scroll) !important;
    height: 150px;
  }

  .back-scroll {
    height: 268px;

    .bg-color-text-1 {
      background: var(--_bg-back-detail-1);
    }
    .bg-color-text-2 {
      background: var(--_bg-back-detail-2) !important;
    }
  }

  &.dark {
    color: hsl(--_color-dark) !important;
    background-color: var(--surface-2) !important;

    --_bg-back-avatar: var(--gray-11) !important;
    --_bg-back-detail-1: var(--gray-9) !important;
    --_bg-front-scroll: hsla(var(--_color) / 0.1) !important;
    --_bg-back-detail-2: hsla(var(--_color) / 0.1) !important;

    &.front__no-bg {
      background-color: transparent !important;
    }
  }
  &.color__purple {
    --_color: var(--purple-11-hsl);
  }

  &.color__green {
    --_color: var(--teal-9-hsl);
  }
}

.rounded {
  border-radius: var(--radius-1);
}

.box-title {
  display: flex;
  justify-content: center;
}
</style>
