<template>
  <div class="ivyforms-advanced-mode-controls__section ivyforms-pb-16 ivyforms-pr-8">
    <!-- Placeholder 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('placeholder_font_color')
      }}</label>
      <div class="ivyforms-color-input-wrapper">
        <StyleColorPicker
          :model-value="placeholderFontColor"
          @update:model-value="emit('update:placeholderFontColor', $event)"
        >
          <template #reference>
            <IvyTextInput
              :model-value="placeholderFontColor"
              class="ivyforms-color-text-input ivyforms-width-100"
              secondary
              @update:model-value="emit('update:placeholderFontColor', $event)"
            >
              <template #suffix>
                <div
                  class="ivyforms-color-preview"
                  :style="{ backgroundColor: placeholderFontColor }"
                />
              </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="fieldPlaceholderFontWeight"
        secondary
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:fieldPlaceholderFontWeight', 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="fieldPlaceholderFontStyle"
        secondary
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:fieldPlaceholderFontStyle', 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="fieldPlaceholderFontSizeValue"
        :unit="fieldPlaceholderFontSizeUnit"
        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:fieldPlaceholderFontSizeValue', $event)"
        @update:unit="emit('update:fieldPlaceholderFontSizeUnit', $event)"
      />
    </div>

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

    <!-- Field Placeholder Alignment -->
    <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('placeholder_alignment')
      }}</label>
      <AlignmentControl
        :model-value="fieldPlaceholderAlignment"
        @update:model-value="emit('update:fieldPlaceholderAlignment', $event)"
      />
    </div>

    <!-- Field Placeholder 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="fieldPlaceholderPaddingLeftRightValue"
        :unit="fieldPlaceholderPaddingLeftRightUnit"
        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:fieldPlaceholderPaddingLeftRightValue', $event)"
        @update:unit="emit('update:fieldPlaceholderPaddingLeftRightUnit', $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 AlignmentControl from '../AlignmentControl.vue'
import IvyDivider from '@/views/_components/divider/IvyDivider.vue'
import type { Alignment } from '@/utils/styleUtils.ts'
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<{
  placeholderFontColor: string
  fieldPlaceholderFontWeight: string
  fieldPlaceholderFontStyle: FontStyle
  fieldPlaceholderFontSizeValue: number | null
  fieldPlaceholderFontSizeUnit: string
  fieldPlaceholderAlignment: Alignment
  fieldPlaceholderPaddingLeftRightValue: number | null
  fieldPlaceholderPaddingLeftRightUnit: string
}>()

const emit = defineEmits<{
  'update:placeholderFontColor': [value: string]
  'update:fieldPlaceholderFontWeight': [value: string]
  'update:fieldPlaceholderFontStyle': [value: FontStyle]
  'update:fieldPlaceholderFontSizeValue': [value: number | null]
  'update:fieldPlaceholderFontSizeUnit': [value: string]
  'update:fieldPlaceholderAlignment': [value: Alignment]
  'update:fieldPlaceholderPaddingLeftRightValue': [value: number | null]
  'update:fieldPlaceholderPaddingLeftRightUnit': [value: string]
}>()
</script>
