<script lang="ts" setup>
import { ref } from 'vue';

import AppBox from 'components/app/AppBox.vue';
import AppCircle from '../app/AppCircle.vue';

defineProps<{
  list: {
    name: string;
    badge: string;
    detail: { label: string; value: string }[];
    male?: boolean;
    female?: boolean;
    disabled?: boolean;
  }[];
}>();

const status = ref(false);
</script>

<template>
  <div class="person-container">
    <AppBox
      bordered
      class="column person-box"
      :class="{ 'person-box__disble': v.disabled }"
      style="padding: 0"
      v-for="(v, i) in list"
      :key="i"
    >
      <div class="q-pa-md column items-center">
        <div class="full-width text-right">
          <q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm">
            <q-menu :offset="[0, 10]" style="width: 130px">
              <q-list>
                <q-item clickable v-close-popup>
                  <q-item-section class="col-4">
                    <q-icon
                      class="full-width"
                      name="mdi-pencil-outline"
                      color="positive"
                      size="xs"
                    />
                  </q-item-section>
                  <q-item-section class="text-caption">
                    แก้ไขข้อมูล
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section class="col-4">
                    <q-icon
                      class="full-width"
                      name="mdi-trash-can-outline"
                      color="negative"
                      size="xs"
                    />
                  </q-item-section>
                  <q-item-section class="text-caption">ลบข้อมูล</q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section class="col-4">
                    <q-toggle
                      dense
                      color="primary"
                      size="xs"
                      v-model="status"
                      val="xs"
                      padding="none"
                    />
                  </q-item-section>
                  <q-item-section class="text-caption">ปิดสถานะ</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>

        <AppCircle class="surface-2 avatar q-mb-md" bordered>Avatar</AppCircle>

        <span class="items-start row">
          {{ v.name }}
          <iconify-icon
            class="q-pl-sm"
            :class="{
              'symbol-gender': v.male || v.female,
              'symbol-gender__male': !v.disabled && v.male,
              'symbol-gender__female': !v.disabled && v.female,
              'symbol-gender__disable': v.disabled,
            }"
            :icon="`material-symbols:${v.male ? 'male' : 'female'}`"
            width="20px"
          />
        </span>
        <span
          class="badge"
          :class="{
            'bg-gender': v.male || v.female,
            'bg-gender__male': !v.disabled && v.male,
            'bg-gender__female': !v.disabled && v.female,
            'bg-gender__disable': v.disabled,
          }"
        >
          {{ v.badge }}
        </span>
      </div>
      <q-separator />
      <div
        class="q-pt-sm q-pb-md q-px-lg q-gutter-x-xl person-detail rounded-b"
        :class="{
          'bg-gender': v.male || v.female,
          'bg-gender__light':
            (!v.disabled && v.male) || (!v.disabled && v.female),
          'bg-gender__male': !v.disabled && v.male,
          'bg-gender__female': !v.disabled && v.female,
          'bg-gender__disable': v.disabled,
        }"
      >
        <div v-for="(d, j) in v.detail" :key="j">
          <span
            :style="{
              color: $q.dark.isActive ? 'var(--foreground)' : 'var(--stone-7)',
            }"
          >
            {{ d.label }}
          </span>
          <span>{{ d.value }}</span>
        </div>
      </div>
    </AppBox>
  </div>
</template>

<style scoped>
.person-box {
  background-color: var(--surface-2);
  box-shadow: var(--shadow-0);
  border-radius: var(--radius-2) !important;

  &.person-box__disble {
    opacity: 0.4;
  }

  & .person-detail {
    box-shadow: inset 0em -5px transparent;
  }

  &:hover {
    cursor: pointer;

    & .person-detail {
      box-shadow: inset 0em -5px hsl(var(--_bg));
    }
  }
}

.person-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--size-6);
}

.avatar {
  block-size: 7rem;
}

.badge {
  display: inline-block;
  border-radius: var(--radius-6);
  background-color: var(--surface-2);
  padding: 0 var(--size-6);
}

.person-detail {
  display: grid;
  flex-grow: 1;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-2);

  & > * {
    display: flex;
    flex-direction: column;

    & > :first-child {
      font-size: var(--font-size-0);
    }
  }
}

.bg-gender {
  color: hsla(var(--_fg));
  background-color: hsl(var(--_bg));

  &.bg-gender__disable {
    --_bg: var(--stone-6-hsl);
    background-color: hsla(var(--_bg) / 0.3);
  }

  &.bg-gender__light {
    color: unset;
    background-color: hsla(var(--_bg) / 0.1);
  }

  &.bg-gender__male {
    --_fg: 0 100 100%;
    --_bg: var(--blue-5-hsl);
  }

  &.bg-gender__female {
    --_fg: 0 100 100%;
    --_bg: var(--pink-7-hsl);
  }
}

.symbol-gender {
  color: hsla(var(--_fg));

  &.symbol-gender__disable {
    --_fg: var(--stone-6-hsl);
  }

  &.symbol-gender__male {
    --_fg: var(--blue-5-hsl);
  }

  &.symbol-gender__female {
    --_fg: var(--pink-7-hsl);
  }
}
</style>
