<template>
  <div class="ivyforms-advanced-mode-controls__section ivyforms-pb-16 ivyforms-pr-8">
    <IvyTabs
      :model-value="fieldLabelsActiveTab"
      :tabs="fieldLabelsTabs"
      priority="secondary"
      type="tonal"
      :background="false"
      class="ivyforms-field-labels-tabs ivyforms-width-100"
      @update:model-value="emit('update:fieldLabelsActiveTab', $event)"
    />

    <!-- Label Tab Content -->
    <div v-if="fieldLabelsActiveTab === 'label'" class="ivyforms-tab-content ivyforms-width-100">
      <!-- Field Label 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('field_label_text')
        }}</label>
        <div class="ivyforms-color-input-wrapper">
          <StyleColorPicker
            :model-value="fieldLabelText"
            @update:model-value="emit('update:fieldLabelText', $event)"
          >
            <template #reference>
              <IvyTextInput
                :model-value="fieldLabelText"
                class="ivyforms-color-text-input ivyforms-width-100"
                secondary
                @update:model-value="emit('update:fieldLabelText', $event)"
              >
                <template #suffix>
                  <div
                    class="ivyforms-color-preview"
                    :style="{ backgroundColor: fieldLabelText }"
                  />
                </template>
              </IvyTextInput>
            </template>
          </StyleColorPicker>
        </div>
      </div>

      <!-- Field Label 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="fieldLabelFontWeight"
          secondary
          class="ivyforms-mixed-input-field"
          @update:model-value="emit('update:fieldLabelFontWeight', String($event))"
        >
          <IvySelectOption
            v-for="option in fontWeightOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </IvySelectInput>
      </div>

      <!-- Field Label 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="fieldLabelFontStyle"
          secondary
          class="ivyforms-mixed-input-field"
          @update:model-value="emit('update:fieldLabelFontStyle', resolveFontStyle($event))"
        >
          <IvySelectOption
            v-for="option in fontStyleOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </IvySelectInput>
      </div>

      <!-- Field Label 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="fieldLabelFontSizeValue"
          :unit="fieldLabelFontSizeUnit"
          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:fieldLabelFontSizeValue', $event)"
          @update:unit="emit('update:fieldLabelFontSizeUnit', $event)"
        />
      </div>

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

      <!-- Field Label Alignment -->
      <!-- TODO: Re-add this when we have an exact plan of aligning the label along with the advanced options 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('label_alignment')
        }}</label>
        <AlignmentControl
          :model-value="fieldLabelAlignment"
          @update:model-value="emit('update:fieldLabelAlignment', $event)"
        />
      </div> -->

      <!-- Field Label 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="fieldLabelPaddingLeftRightValue"
          :unit="fieldLabelPaddingLeftRightUnit"
          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:fieldLabelPaddingLeftRightValue', $event)"
          @update:unit="emit('update:fieldLabelPaddingLeftRightUnit', $event)"
        />
      </div>

      <!-- Field Label 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="fieldLabelPaddingTopBottomValue"
          :unit="fieldLabelPaddingTopBottomUnit"
          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:fieldLabelPaddingTopBottomValue', $event)"
          @update:unit="emit('update:fieldLabelPaddingTopBottomUnit', $event)"
        />
      </div>
    </div>

    <!-- Required Indicator Tab Content -->
    <div
      v-if="fieldLabelsActiveTab === 'required-indicator'"
      class="ivyforms-tab-content ivyforms-width-100"
    >
      <!-- Required Indicator 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="requiredIndicatorFontColor"
            @update:model-value="emit('update:requiredIndicatorFontColor', $event)"
          >
            <template #reference>
              <IvyTextInput
                :model-value="requiredIndicatorFontColor"
                class="ivyforms-color-text-input ivyforms-width-100"
                secondary
                @update:model-value="emit('update:requiredIndicatorFontColor', $event)"
              >
                <template #suffix>
                  <div
                    class="ivyforms-color-preview"
                    :style="{ backgroundColor: requiredIndicatorFontColor }"
                  />
                </template>
              </IvyTextInput>
            </template>
          </StyleColorPicker>
        </div>
      </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 IvyTabs from '@/views/_components/tabs/IvyTabs.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<{
  fieldLabelsActiveTab: string
  fieldLabelsTabs: Array<{ name: string; label: string }>
  fieldLabelText: string
  fieldLabelFontWeight: string
  fieldLabelFontStyle: FontStyle
  fieldLabelFontSizeValue: number | null
  fieldLabelFontSizeUnit: string
  fieldLabelAlignment: Alignment
  requiredIndicatorFontColor: string
  fieldLabelPaddingLeftRightValue: number | null
  fieldLabelPaddingLeftRightUnit: string
  fieldLabelPaddingTopBottomValue: number | null
  fieldLabelPaddingTopBottomUnit: string
}>()

const emit = defineEmits<{
  'update:fieldLabelsActiveTab': [value: string]
  'update:fieldLabelText': [value: string]
  'update:fieldLabelFontWeight': [value: string]
  'update:fieldLabelFontStyle': [value: FontStyle]
  'update:fieldLabelFontSizeValue': [value: number | null]
  'update:fieldLabelFontSizeUnit': [value: string]
  'update:fieldLabelAlignment': [value: Alignment]
  'update:requiredIndicatorFontColor': [value: string]
  'update:fieldLabelPaddingLeftRightValue': [value: number | null]
  'update:fieldLabelPaddingLeftRightUnit': [value: string]
  'update:fieldLabelPaddingTopBottomValue': [value: number | null]
  'update:fieldLabelPaddingTopBottomUnit': [value: string]
}>()
</script>
