<template>
  <IvySelectInput
    v-model="selectedLevel"
    :placeholder="'Select Heading Level'"
    :clearable="false"
    :disabled="false"
    :multiple="false"
    :class="{ 'is-secondary': isSecondary }"
    :aria-label="props.ariaLabel || getLabel('heading_level')"
    @change="toggleHeading"
  >
    <IvySelectOption
      :value="0"
      :label="getLabel('paragraph')"
      :class="{ 'is-secondary': isSecondary }"
    >
      <p>Paragraph</p>
    </IvySelectOption>
    <IvySelectOption
      v-for="level in 6"
      :key="level"
      :value="level"
      :label="'Heading ' + level"
      :class="{ 'is-secondary': isSecondary }"
    >
      <component :is="'h' + level" data-item-type="heading">Heading {{ level }}</component>
    </IvySelectOption>
  </IvySelectInput>
</template>

<script setup lang="ts">
import { Editor } from '@tiptap/vue-3'
import type { Level } from '@tiptap/extension-heading'
import { ref } from 'vue'
import { useLabels } from '@/composables/useLabels'
const { getLabel } = useLabels()

const props = defineProps<{
  editor: Editor
  ariaLabel?: string
}>()

const isSecondary = ref(true)
const selectedLevel = ref<string>('Paragraph')

const toggleHeading = (level: Level) => {
  if (level > 0) {
    props.editor.commands.toggleHeading({ level })

    return
  }

  props.editor.commands.setParagraph()
}
</script>

<style lang="scss">
@use 'sass:list' as *;
@use 'sass:meta' as *;

// Heading previews use real h1–h6 tags; WP theme heading styles on the public form
// would otherwise blow up dropdown item sizes. Use browser-default relative sizing.
.ivyforms-select-popper .ivyforms-select-option.el-select-dropdown__item {
  font-size: 13px;

  p,
  [data-item-type='heading'] {
    color: var(--map-base-text-0);
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
  }

  p {
    font-size: 13px;
    margin: 0.67em 0;
  }

  h1[data-item-type='heading'] {
    font-size: 2em;
    margin: 1em 0;
  }

  h2[data-item-type='heading'],
  h3[data-item-type='heading'] {
    font-size: 1.3em;
    margin: 1em 0;
  }

  h4[data-item-type='heading'] {
    font-size: 1em;
    margin: 1.33em 0;
  }

  h5[data-item-type='heading'] {
    font-size: 0.83em;
    margin: 1.67em 0;
  }

  h6[data-item-type='heading'] {
    font-size: 0.67em;
    margin: 2.33em 0;
  }
}
</style>
