<template>
  <div class="ivyforms-advanced-mode-controls__section ivyforms-pb-16 ivyforms-pr-8">
    <!-- Font 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('font_color')
      }}</label>
      <div class="ivyforms-color-input-wrapper">
        <StyleColorPicker
          :model-value="formDescriptionFontColor"
          @update:model-value="emit('update:formDescriptionFontColor', $event)"
        >
          <template #reference>
            <IvyTextInput
              :model-value="formDescriptionFontColor"
              class="ivyforms-color-text-input ivyforms-width-100"
              secondary
              @update:model-value="emit('update:formDescriptionFontColor', $event)"
            >
              <template #suffix>
                <div
                  class="ivyforms-color-preview"
                  :style="{ backgroundColor: formDescriptionFontColor }"
                />
              </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="formDescriptionFontWeight"
        secondary
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:formDescriptionFontWeight', 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="formDescriptionFontStyle"
        secondary
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:formDescriptionFontStyle', 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="formDescriptionFontSizeValue"
        :unit="formDescriptionFontSizeUnit"
        secondary
        icon-prepend="size-text"
        icon-prepend-category="builder"
        :units="['px', 'pt', 'rem', 'em']"
        placeholder="16"
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:formDescriptionFontSizeValue', $event)"
        @update:unit="emit('update:formDescriptionFontSizeUnit', $event)"
      />
    </div>

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

    <!-- Form Description 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="formDescriptionPaddingLeftRightValue"
        :unit="formDescriptionPaddingLeftRightUnit"
        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:formDescriptionPaddingLeftRightValue', $event)"
        @update:unit="emit('update:formDescriptionPaddingLeftRightUnit', $event)"
      />
    </div>

    <!-- Form Description 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="formDescriptionPaddingTopBottomValue"
        :unit="formDescriptionPaddingTopBottomUnit"
        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:formDescriptionPaddingTopBottomValue', $event)"
        @update:unit="emit('update:formDescriptionPaddingTopBottomUnit', $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<{
  formDescriptionFontColor: string
  formDescriptionFontWeight: string
  formDescriptionFontStyle: FontStyle
  formDescriptionFontSizeValue: number | null
  formDescriptionFontSizeUnit: string
  formDescriptionPaddingLeftRightValue: number | null
  formDescriptionPaddingLeftRightUnit: string
  formDescriptionPaddingTopBottomValue: number | null
  formDescriptionPaddingTopBottomUnit: string
}>()

const emit = defineEmits<{
  'update:formDescriptionFontColor': [value: string]
  'update:formDescriptionFontWeight': [value: string]
  'update:formDescriptionFontStyle': [value: FontStyle]
  'update:formDescriptionFontSizeValue': [value: number | null]
  'update:formDescriptionFontSizeUnit': [value: string]
  'update:formDescriptionPaddingLeftRightValue': [value: number | null]
  'update:formDescriptionPaddingLeftRightUnit': [value: string]
  'update:formDescriptionPaddingTopBottomValue': [value: number | null]
  'update:formDescriptionPaddingTopBottomUnit': [value: string]
}>()
</script>
