<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="checkboxRadioFontColor"
          @update:model-value="emit('update:checkboxRadioFontColor', $event)"
        >
          <template #reference>
            <IvyTextInput
              :model-value="checkboxRadioFontColor"
              class="ivyforms-color-text-input ivyforms-width-100"
              secondary
              @update:model-value="emit('update:checkboxRadioFontColor', $event)"
            >
              <template #suffix>
                <div
                  class="ivyforms-color-preview"
                  :style="{ backgroundColor: checkboxRadioFontColor }"
                />
              </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="checkboxRadioFontWeight"
        secondary
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:checkboxRadioFontWeight', 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="checkboxRadioFontStyle"
        secondary
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:checkboxRadioFontStyle', 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="checkboxRadioFontSizeValue"
        :unit="checkboxRadioFontSizeUnit"
        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:checkboxRadioFontSizeValue', $event)"
        @update:unit="emit('update:checkboxRadioFontSizeUnit', $event)"
      />
    </div>

    <!-- Selection 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('selection_color')
      }}</label>
      <div class="ivyforms-color-input-wrapper">
        <StyleColorPicker
          :model-value="checkboxRadioSelectionColor"
          @update:model-value="emit('update:checkboxRadioSelectionColor', $event)"
        >
          <template #reference>
            <IvyTextInput
              :model-value="checkboxRadioSelectionColor"
              class="ivyforms-color-text-input ivyforms-width-100"
              secondary
              @update:model-value="emit('update:checkboxRadioSelectionColor', $event)"
            >
              <template #suffix>
                <div
                  class="ivyforms-color-preview"
                  :style="{ backgroundColor: checkboxRadioSelectionColor }"
                />
              </template>
            </IvyTextInput>
          </template>
        </StyleColorPicker>
      </div>
    </div>

    <!-- Border 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('border_color')
      }}</label>
      <div class="ivyforms-color-input-wrapper">
        <StyleColorPicker
          :model-value="checkboxRadioBorderColor"
          @update:model-value="emit('update:checkboxRadioBorderColor', $event)"
        >
          <template #reference>
            <IvyTextInput
              :model-value="checkboxRadioBorderColor"
              class="ivyforms-color-text-input ivyforms-width-100"
              secondary
              @update:model-value="emit('update:checkboxRadioBorderColor', $event)"
            >
              <template #suffix>
                <div
                  class="ivyforms-color-preview"
                  :style="{ backgroundColor: checkboxRadioBorderColor }"
                />
              </template>
            </IvyTextInput>
          </template>
        </StyleColorPicker>
      </div>
    </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 { 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<{
  checkboxRadioFontColor: string
  checkboxRadioFontWeight: string
  checkboxRadioFontStyle: FontStyle
  checkboxRadioFontSizeValue: number | null
  checkboxRadioFontSizeUnit: string
  checkboxRadioSelectionColor: string
  checkboxRadioBorderColor: string
}>()

const emit = defineEmits<{
  'update:checkboxRadioFontColor': [value: string]
  'update:checkboxRadioFontWeight': [value: string]
  'update:checkboxRadioFontStyle': [value: FontStyle]
  'update:checkboxRadioFontSizeValue': [value: number | null]
  'update:checkboxRadioFontSizeUnit': [value: string]
  'update:checkboxRadioSelectionColor': [value: string]
  'update:checkboxRadioBorderColor': [value: string]
}>()
</script>
