<template>
  <div class="ivyforms-advanced-mode-controls__section ivyforms-pb-16 ivyforms-pr-8">
    <!-- Form Title Text Color -->
    <div
      class="ivyforms-advanced-field ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-mb-16 ivyforms-gap-16"
    >
      <label class="ivyforms-advanced-label ivyforms-flex-shrink-0">{{
        getLabel('form_title_text')
      }}</label>
      <div class="ivyforms-color-input-wrapper">
        <StyleColorPicker
          :model-value="formTitleText"
          @update:model-value="emit('update:formTitleText', $event)"
        >
          <template #reference>
            <IvyTextInput
              :model-value="formTitleText"
              class="ivyforms-color-text-input ivyforms-width-100"
              secondary
              @update:model-value="emit('update:formTitleText', $event)"
            >
              <template #suffix>
                <div class="ivyforms-color-preview" :style="{ backgroundColor: formTitleText }" />
              </template>
            </IvyTextInput>
          </template>
        </StyleColorPicker>
      </div>
    </div>

    <!-- Font Weight -->
    <div
      class="ivyforms-advanced-field ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-mb-16 ivyforms-gap-16"
    >
      <label class="ivyforms-advanced-label ivyforms-flex-shrink-0">{{
        getLabel('font_weight')
      }}</label>
      <IvySelectInput
        :model-value="formTitleFontWeight"
        secondary
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:formTitleFontWeight', String($event))"
      >
        <IvySelectOption
          v-for="option in fontWeightOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </IvySelectInput>
    </div>

    <!-- Font Style -->
    <div
      class="ivyforms-advanced-field ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-mb-16 ivyforms-gap-16"
    >
      <label class="ivyforms-advanced-label ivyforms-flex-shrink-0">{{
        getLabel('font_style')
      }}</label>
      <IvySelectInput
        :model-value="formTitleFontStyle"
        secondary
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:formTitleFontStyle', resolveFontStyle($event))"
      >
        <IvySelectOption
          v-for="option in fontStyleOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </IvySelectInput>
    </div>

    <!-- Font Size -->
    <div
      class="ivyforms-advanced-field ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-mb-16 ivyforms-gap-16"
    >
      <label class="ivyforms-advanced-label ivyforms-flex-shrink-0">{{
        getLabel('font_size')
      }}</label>
      <IvyMixedInput
        :model-value="formTitleFontSizeValue"
        :unit="formTitleFontSizeUnit"
        secondary
        icon-prepend="size-text"
        icon-prepend-category="builder"
        :units="['px', 'pt', 'rem', 'em']"
        placeholder="20"
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:formTitleFontSizeValue', $event)"
        @update:unit="emit('update:formTitleFontSizeUnit', $event)"
      />
    </div>

    <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />

    <!-- Form Title Padding Left/Right -->
    <div
      class="ivyforms-advanced-field ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-mb-16 ivyforms-gap-16"
    >
      <label class="ivyforms-advanced-label ivyforms-flex-shrink-0">{{
        getLabel('padding_left_right')
      }}</label>
      <IvyMixedInput
        :model-value="formTitlePaddingLeftRightValue"
        :unit="formTitlePaddingLeftRightUnit"
        secondary
        icon-prepend="margin-left-right"
        icon-prepend-category="builder"
        :units="['px', 'rem', 'em']"
        placeholder="0"
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:formTitlePaddingLeftRightValue', $event)"
        @update:unit="emit('update:formTitlePaddingLeftRightUnit', $event)"
      />
    </div>

    <!-- Form Title Padding Top/Bottom -->
    <div
      class="ivyforms-advanced-field ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-mb-16 ivyforms-gap-16"
    >
      <label class="ivyforms-advanced-label ivyforms-flex-shrink-0">{{
        getLabel('padding_top_bottom')
      }}</label>
      <IvyMixedInput
        :model-value="formTitlePaddingTopBottomValue"
        :unit="formTitlePaddingTopBottomUnit"
        secondary
        icon-prepend="margin-top-bottom"
        icon-prepend-category="builder"
        :units="['px', 'rem', 'em']"
        placeholder="0"
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:formTitlePaddingTopBottomValue', $event)"
        @update:unit="emit('update:formTitlePaddingTopBottomUnit', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useLabels } from '@/composables/useLabels'
import IvyTextInput from '@/views/_components/input/IvyTextInput.vue'
import IvyMixedInput from '@/views/_components/input/IvyMixedInput.vue'
import IvySelectInput from '@/views/_components/input/IvySelectInput.vue'
import StyleColorPicker from '../StyleColorPicker.vue'
import IvyDivider from '@/views/_components/divider/IvyDivider.vue'
import { FONT_WEIGHT_OPTIONS } from '@/constants/defaultFormStyles'
import { FONT_STYLE_OPTIONS, resolveFontStyle } from '@/utils/styleUtils.ts'
import type { FontStyle } from '@/utils/styleUtils.ts'

const { getLabel } = useLabels()

const fontWeightOptions = FONT_WEIGHT_OPTIONS

const fontStyleOptions = FONT_STYLE_OPTIONS

defineProps<{
  formTitleText: string
  formTitleFontWeight: string
  formTitleFontStyle: FontStyle
  formTitleFontSizeValue: number | null
  formTitleFontSizeUnit: string
  formTitlePaddingLeftRightValue: number | null
  formTitlePaddingLeftRightUnit: string
  formTitlePaddingTopBottomValue: number | null
  formTitlePaddingTopBottomUnit: string
}>()

const emit = defineEmits<{
  'update:formTitleText': [value: string]
  'update:formTitleFontWeight': [value: string]
  'update:formTitleFontStyle': [value: FontStyle]
  'update:formTitleFontSizeValue': [value: number | null]
  'update:formTitleFontSizeUnit': [value: string]
  'update:formTitlePaddingLeftRightValue': [value: number | null]
  'update:formTitlePaddingLeftRightUnit': [value: string]
  'update:formTitlePaddingTopBottomValue': [value: number | null]
  'update:formTitlePaddingTopBottomUnit': [value: string]
}>()
</script>
