<template>
  <v-tooltip
    :aria-id="ariaId"
    :popper-class="dynamicTooltipClasses"
    :disabled
    :distance
    :placement
    :container="dynamicContainer"
  >
    <slot />
    <template #popper>
      <div class="cpTooltip__wrapper">
        <div class="cpTooltip__content">
          <p v-if="content">
            {{ content }}
          </p>
          <p v-else>
            <slot name="content" />
          </p>
        </div>
        <template v-if="hasSubcontent">
          <hr class="cpTooltip__separator" />
          <div class="cpTooltip__subcontent">
            <p v-if="subcontent">{{ subcontent }}</p>
            <p v-else>
              <slot name="subcontent" />
            </p>
          </div>
        </template>
      </div>
    </template>
  </v-tooltip>
</template>

<script setup lang="ts">
import { Tooltip as VTooltip } from 'floating-vue'
import type { Slots } from 'vue'
import { computed, useId, useSlots } from 'vue'

import { Colors } from '@/constants'
import { capitalizeFirstLetter } from '@/helpers'

type TooltipColors = Extract<Colors, 'accent' | 'neutral'>
type Placement = 'top' | 'right' | 'bottom' | 'left'

interface Props {
  allowOutsideContainer?: boolean
  color?: TooltipColors
  content?: string
  disabled?: boolean
  distance?: number
  placement?: Placement
  subcontent?: string
}

const props = withDefaults(defineProps<Props>(), {
  content: '',
  distance: 8,
  color: 'accent',
  placement: undefined,
  subcontent: '',
  allowOutsideContainer: false,
})

const ariaId = useId()
const slots: Slots = useSlots()

const hasSubcontent = computed(() => !!(props.subcontent || slots.subcontent))

const dynamicTooltipClasses = computed(() => ['cpTooltip', `cpTooltip--is${capitalizeFirstLetter(props.color)}`])
const dynamicContainer = computed(() => props.allowOutsideContainer ? undefined : false)
</script>

<style lang="scss">
.cpTooltip.v-popper--theme-tooltip {
  display: inline-flex;
  white-space: pre-wrap;

  .v-popper__inner {
    max-width: fn.px-to-rem(300);
    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
    border-radius: var(--cp-radius-md);
    background-color: var(--cp-tooltip-bg);
    font-size: var(--cp-text-size-xs);
    font-weight: 400;
    line-height: var(--cp-line-height-xs);
    text-align: left;
  }

  .cpTooltip__content {
    color: var(--cp-tooltip-content-text);
  }

  .cpTooltip__wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .cpTooltip__separator {
    width: 100%;
    border: none;
    border-top: 1px solid var(--cp-colors-white);
    margin: var(--cp-spacing-md) 0;
    opacity: 0.5;
  }

  .cpTooltip__subcontent {
    color: var(--cp-tooltip-subcontent-text);
    font-style: italic;
  }

  .v-popper__arrow-outer {
    border-color: var(--cp-tooltip-bg);
  }

  &.cpTooltip--isAccent {
    --cp-tooltip-bg: var(--cp-background-accent-solid);
    --cp-tooltip-content-text: var(--cp-foreground-white);
    --cp-tooltip-subcontent-text: var(--cp-foreground-white);
  }

  &.cpTooltip--isNeutral {
    --cp-tooltip-bg: color-mix(in sRGB, var(--cp-background-black) 80%, transparent);
    --cp-tooltip-content-text: var(--cp-foreground-white);
    --cp-tooltip-subcontent-text: color-mix(in sRGB, var(--cp-foreground-white) 70%, transparent);
  }
}
</style>
