<template>
  <div class="playlist-visibility">
    <UiToggle
      :model-value="modelValue === PlaylistType.Public"
      @update:model-value="emit('update:modelValue', $event ? PlaylistType.Public : PlaylistType.Private)"
    >
      <span class="playlist-visibility__label">
        <UiIcon
          :name="PLAYLIST_TYPE_ICON[PlaylistType.Public]"
          class="playlist-visibility__icon"
          size="16"
        />
        {{ $t('public') }}
      </span>
    </UiToggle>
    <UiTooltip
      class="playlist-visibility__tooltip"
      right
    >
      <template #trigger>
        <span class="playlist-visibility__hint">?</span>
      </template>
      <p class="playlist-visibility__text">
        <span
          aria-hidden="true"
          class="playlist-visibility__toggle --on"
        />
        <span><strong>{{ $t('playlist.public_on') }}</strong> — {{ $t('playlist.public_on_hint') }}</span>
      </p>
      <p class="playlist-visibility__text">
        <span
          aria-hidden="true"
          class="playlist-visibility__toggle"
        />
        <span><strong>{{ $t('playlist.public_off') }}</strong> — {{ $t('playlist.public_off_hint') }}</span>
      </p>
    </UiTooltip>
  </div>
</template>

<script setup lang="ts">
import { PLAYLIST_TYPE_ICON, PlaylistType } from '../../runtime';

defineProps<{
  modelValue: PlaylistType
}>();

const emit = defineEmits<{
  (eventName: 'update:modelValue', value: PlaylistType): void
}>();
</script>

<style lang="scss">
.playlist-visibility {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.playlist-visibility__label {
  @include font-sm;

  display: flex;
  align-items: center;
  column-gap: 8px;
}

.playlist-visibility__icon {
  color: $playlist-visibility-icon;
}

.playlist-visibility__tooltip {
  margin-left: 0;
}

.playlist-visibility__tooltip .ui-tooltip__content {
  width: 288px;
}

.playlist-visibility__hint {
  @include font-xs;

  display: inline-grid;
  place-content: center;
  width: 20px;
  height: 20px;
  border-radius: $radius-full;
  color: $playlist-visibility-hint-text;
  background-color: $playlist-visibility-hint-bg;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;

  @include hover(background-color) {
    background-color: $playlist-visibility-hint-bg--hover;
  }
}

.playlist-visibility__text {
  @include font-xs;

  display: flex;
  align-items: start;
  column-gap: 10px;
  line-height: 1.5;
}

.playlist-visibility__text:not(:last-child) {
  margin-bottom: 10px;
}

.playlist-visibility__text strong {
  color: $playlist-visibility-tooltip-highlight;
  font-weight: 700;
}

.playlist-visibility__toggle {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 16px;
  margin-top: 2px;
  border-radius: $radius-full;
  background-color: $toggle-bg;

  &::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: $toggle-handle;
  }
}

.playlist-visibility__toggle.--on {
  background-color: $toggle-bg--active;

  &::after {
    left: auto;
    right: 2px;
    background-color: $toggle-handle--active;
  }
}
</style>
