<script setup lang="ts">
defineProps<{
  imgSrc: string;
  title: string;
  caption: string;
}>();
</script>

<template>
  <div class="tooltip" :class="{ 'dark-tooltip': $q.dark.isActive }">
    <q-btn
      unelevated
      class="color-btn-icon"
      size="10px"
      round
      icon="mdi-exclamation"
      :class="{ 'dark-btn-icon': $q.dark.isActive }"
    />

    <div
      class="tooltip-text"
      :class="{ 'dark-tooltip-text': $q.dark.isActive }"
    >
      <q-img
        class="q-mt-md"
        :src="`/${imgSrc}${$q.dark.isActive ? 'dark' : 'light'}.png`"
        width="60%"
      />
      <div
        class="box-content"
        :class="{ 'dack-box-content': $q.dark.isActive }"
      >
        <div class="column justify-center" style="height: 100%">
          <div class="col-4">{{ $t(title) }}</div>
          <div class="col-4 q-mb-md q-px-md">
            <div
              class="content-text q-pa-sm"
              :class="{ 'dack-content-text': $q.dark.isActive }"
            >
              {{ $t(caption) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.box-content {
  position: absolute;
  width: 100%;
  height: 45%;
  background: var(--_bg-box-content);
  bottom: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

  .content-text {
    color: var(--_color-box-content-text);
    background: var(--_bg-box-content-text);
    border-radius: 6px;

    &.dack-content-text {
      border: 1px solid var(--brand-1);
    }
  }

  &.dack-box-content {
    border: 1px solid var(--gray-7);
  }
}

.tooltip {
  --_main-page-branch-tooltip: 100%;
  --_bg-box-content: var(--blue-5);
  --_color-box-content-text: var(--_bg-box-content);
  --_bg-box-content-text: white;
  --_bg-tooltip-branch: #f0f9ff;
  --_bg-tooltip-branch-arrow: var(--_bg-tooltip-branch);

  position: relative;
  display: inline-block;

  &.dark-tooltip {
    --_bg-box-content: var(--gray-9);
    --_bg-tooltip-branch: var(--gray-11);
    --_bg-tooltip-branch-arrow: var(--_bg-box-content);
    --_bg-box-content-text: var(--gray-11);
    --_color-box-content-text: var(--gray-0);
    --_main-page-branch-tooltip: 100.5%;
  }
}

.tooltip-text {
  &.dark-tooltip-text {
    border: 1px solid var(--gray-7);
  }
}

.tooltip .tooltip-text {
  border: 1px solid var(--_bg-box-content);
  width: 250px;
  height: 200px;
  background-color: var(--_bg-tooltip-branch);
  color: white;
  text-align: center;
  border-radius: 10px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: -165px;
  left: -265px;
}

.tooltip .tooltip-text::after {
  content: '';
  z-index: -99;
  position: absolute;
  top: 7%;
  left: var(--_main-page-branch-tooltip);
  border-width: 8px;
  border-style: solid;
  border-color: var(--_bg-box-content) transparent transparent transparent;
  transform: rotate(270deg);
}

.color-btn-icon {
  --_bg-color-btn-icon: var(--blue-5-hsl);
  transform: rotate(180deg);
  color: var(--gray-0);
  background: hsl(var(--_bg-color-btn-icon));

  &.dark-btn-icon {
    --_bg-color-btn-icon: var(--surface-0);
    border: 2px solid;
    border-color: var(--brand-1);
  }
}
</style>
