<script lang="ts" setup>
defineProps<{
  inactive?: boolean;
  color?: 'none' | 'pers' | 'corp';
  data: {
    customerBranchFormTab: number;
    branchName: string;
    address: string;
    telephone: string;
    businessTypePure: string;
    totalEmployee: number;
  };
  metadata?: unknown;
  badgeField?: string[];
  fieldSelected?: (
    | 'customerBranchFormTab'
    | 'branchName'
    | 'address'
    | 'telephone'
    | 'businessTypePure'
    | 'totalEmployee'
  )[];
  footer?: boolean;
}>();
</script>

<template>
  <div
    class="branch-card rounded bordered"
    :class="{
      'branch-card__dark': $q.dark.isActive,
      'branch-card__inactive': inactive,
      'branch-card__none':
        color !== 'pers' && color !== 'corp' && (!color || color === 'none'),
      'branch-card__pers': color === 'pers',
      'branch-card__corp': color === 'corp',
    }"
    @click="$emit('open')"
  >
    <div class="branch-card__header">
      <div class="branch-card__icon">
        <q-icon
          size="md"
          style="scale: 0.8"
          name="mdi-office-building-outline"
        />
      </div>
      <div class="branch-card__name">
        <b>{{ data.branchName }}</b>
        <small class="branch-card__code">{{ data.branchName }}</small>
      </div>

      <div class="branch-card__action">
        <q-btn
          icon="mdi-eye-outline"
          size="sm"
          dense
          round
          flat
          @click.stop="$emit('viewDetail')"
        >
          <slot name="action" />
        </q-btn>
      </div>
    </div>
    <div
      style="
        display: block;
        width: 100%;
        height: 1px;
        background: hsla(0 0% 0% / 0.1);
        margin-bottom: var(--size-2);
      "
    />
    <div
      v-for="key in fieldSelected?.sort() || [
        'customerBranchFormTab',
        'branchName',
        'address',
        'telephone',
        'businessTypePure',
        'totalEmployee',
      ]"
      class="branch-card__data"
    >
      <div>{{ $t(key) }}</div>
      <div>{{ data[key as keyof typeof data] }}</div>
    </div>
  </div>
</template>

<style scoped>
.branch-card {
  --_branch-card-fg: 0 0% 100%;
  --_branch-card-bg: var(--blue-5-hsl);
  --_branch-status-color: var(--green-6-hsl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--size-3);

  & .branch-card__header {
    display: flex;
    margin-bottom: var(--size-2);

    & .branch-card__icon {
      background-color: hsla(var(--_branch-card-bg) / 0.15);
      border-radius: 50%;
      padding: var(--size-1);
      position: relative;
      transform: rotate(45deg);

      &::after {
        content: ' ';
        display: block;
        block-size: 0.5rem;
        aspect-ratio: 1;
        position: absolute;
        border-radius: 50%;
        right: -0.25rem;
        top: calc(50% - 0.25rem);
        bottom: calc(50% - 0.25rem);
        background-color: hsla(var(--_branch-status-color) / 1);
      }

      & :deep(.q-icon) {
        transform: rotate(-45deg);
        color: hsla(var(--_branch-card-bg) / 1);
      }
    }

    & .branch-card__name {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding-inline: var(--size-2);

      & .branch-card__code {
        color: hsla(var(--text-mute) / 1);
      }
    }

    & .branch-card__action {
      margin-left: auto;
    }
  }
  & .branch-card__data {
    display: flex;
    padding-block: var(--size-2);

    & > :first-child {
      color: hsla(var(--text-mute) / 1);
      width: 0%;
      min-width: 40%;
    }
  }

  &.branch-card__none {
    --_branch-card-bg: var(--gray-3-hsl);

    &.branch-card__dark {
      --_branch-card-bg: var(--gray-9-hsl);
    }

    &:not(.branch-card__dark) .branch-card__header {
      color: currentColor;

      & .branch-card__view-detail {
        color: hsla(var(--gray-10-hsl) / 0.3);
      }
    }
  }

  &.branch-card__pers {
    --_branch-card-bg: var(--pink-6-hsl);
  }

  &.branch-card__corp {
    --_branch-card-bg: var(--violet-11-hsl);

    &.branch-card__dark {
      --_branch-card-bg: var(--violet-10-hsl);
    }
  }

  &.branch-card__inactive {
    --_branch-status-color: var(--red-4-hsl);
    --_branch-badge-bg: var(--red-4-hsl);
    filter: grayscale(1);
    background-color: hsl(var(--gray-6-hsl) / 0.1);
    opacity: 0.5;
  }
}
</style>
