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

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

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

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

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

      <!-- Field 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
          secondary
          :model-value="fieldFontSizeValue"
          :unit="fieldFontSizeUnit"
          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:fieldFontSizeValue', $event)"
          @update:unit="emit('update:fieldFontSizeUnit', $event)"
        />
      </div>

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

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

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

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

      <!-- Field Corner -->
      <div
        class="ivyforms-advanced-field ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-between ivyforms-mb-16 ivyforms-gap-16 ivyforms-corner-field"
      >
        <label class="ivyforms-advanced-label ivyforms-flex-shrink-0">{{
          getLabel('field_corner')
        }}</label>
        <div
          class="ivyforms-corner-inputs ivyforms-flex ivyforms-flex-direction-column ivyforms-gap-8"
        >
          <div class="ivyforms-corner-main-input">
            <IvyButtonAction
              size="s"
              type="ghost"
              :priority="isFieldCornerLinked ? 'secondary' : 'tertiary'"
              :icon-start="isFieldCornerLinked ? 'link' : 'link-broken'"
              icon-start-category="global"
              :icon-only="true"
              :aria-label="
                isFieldCornerLinked ? getLabel('unlink_corners') : getLabel('link_corners')
              "
              @click="emit('toggleFieldCornerLinked')"
            />
            <IvyMixedInput
              secondary
              :model-value="fieldCornerMainValue"
              :unit="fieldCornerLinkedUnit"
              icon-prepend="corner-all"
              icon-prepend-category="builder"
              :units="['px', 'rem', 'em', '%']"
              :placeholder="fieldCornerMainPlaceholder"
              :disabled="!isFieldCornerLinked"
              class="ivyforms-mixed-input-field ivyforms-mixed-input-field--full"
              @update:model-value="emit('update:fieldCornerMainValue', $event)"
              @update:unit="emit('update:fieldCornerLinkedUnit', $event)"
            />
          </div>
        </div>
      </div>
      <div v-if="!isFieldCornerLinked" class="ivyforms-corner-grid ivyforms-pb-8">
        <div class="ivyforms-corner-grid-item">
          <IvyMixedInput
            secondary
            :model-value="fieldCornerTopLeftValue"
            :unit="fieldCornerTopLeftUnit"
            icon-prepend="corner-top-left"
            icon-prepend-category="builder"
            :units="['px', 'rem', 'em', '%']"
            placeholder="6"
            class="ivyforms-mixed-input-field ivyforms-mixed-input-field--full"
            @update:model-value="emit('update:fieldCornerTopLeftValue', $event)"
            @update:unit="emit('update:fieldCornerTopLeftUnit', $event)"
          />
        </div>
        <div class="ivyforms-corner-grid-item">
          <IvyMixedInput
            secondary
            :model-value="fieldCornerTopRightValue"
            :unit="fieldCornerTopRightUnit"
            icon-prepend="corner-top-right"
            icon-prepend-category="builder"
            :units="['px', 'rem', 'em', '%']"
            placeholder="6"
            class="ivyforms-mixed-input-field ivyforms-mixed-input-field--full"
            @update:model-value="emit('update:fieldCornerTopRightValue', $event)"
            @update:unit="emit('update:fieldCornerTopRightUnit', $event)"
          />
        </div>
        <div class="ivyforms-corner-grid-item">
          <IvyMixedInput
            secondary
            :model-value="fieldCornerBottomLeftValue"
            :unit="fieldCornerBottomLeftUnit"
            icon-prepend="corner-bottom-left"
            icon-prepend-category="builder"
            :units="['px', 'rem', 'em', '%']"
            placeholder="6"
            class="ivyforms-mixed-input-field ivyforms-mixed-input-field--full"
            @update:model-value="emit('update:fieldCornerBottomLeftValue', $event)"
            @update:unit="emit('update:fieldCornerBottomLeftUnit', $event)"
          />
        </div>
        <div class="ivyforms-corner-grid-item">
          <IvyMixedInput
            secondary
            :model-value="fieldCornerBottomRightValue"
            :unit="fieldCornerBottomRightUnit"
            icon-prepend="corner-bottom-right"
            icon-prepend-category="builder"
            :units="['px', 'rem', 'em', '%']"
            placeholder="6"
            class="ivyforms-mixed-input-field ivyforms-mixed-input-field--full"
            @update:model-value="emit('update:fieldCornerBottomRightValue', $event)"
            @update:unit="emit('update:fieldCornerBottomRightUnit', $event)"
          />
        </div>
      </div>

      <!-- Field Border Width -->
      <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_border_width')
        }}</label>
        <IvyMixedInput
          secondary
          :model-value="fieldBorderWidthValue"
          :unit="fieldBorderWidthUnit"
          icon-prepend="size-border"
          icon-prepend-category="builder"
          :units="['px', 'rem', 'em']"
          placeholder="1"
          class="ivyforms-mixed-input-field"
          @update:model-value="emit('update:fieldBorderWidthValue', $event)"
          @update:unit="emit('update:fieldBorderWidthUnit', $event)"
        />
      </div>

      <!-- Field Border 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('border_style')
        }}</label>
        <IvySelectInput
          secondary
          :model-value="fieldBorderStyle"
          :icon-start="getBorderStyleIcon(fieldBorderStyle)"
          icon-start-category="builder"
          class="ivyforms-mixed-input-field"
          @update:model-value="emit('update:fieldBorderStyle', resolveBorderStyle($event))"
        >
          <IvySelectOption
            v-for="option in borderStyleOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </IvySelectInput>
      </div>

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

      <!-- Field 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
          secondary
          :model-value="fieldPaddingLeftRightValue"
          :unit="fieldPaddingLeftRightUnit"
          icon-prepend="margin-left-right"
          icon-prepend-category="builder"
          :units="['px', 'rem', 'em']"
          placeholder="12"
          class="ivyforms-mixed-input-field"
          @update:model-value="emit('update:fieldPaddingLeftRightValue', $event)"
          @update:unit="emit('update:fieldPaddingLeftRightUnit', $event)"
        />
      </div>

      <!-- Field 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
          secondary
          :model-value="fieldPaddingTopBottomValue"
          :unit="fieldPaddingTopBottomUnit"
          icon-prepend="margin-top-bottom"
          icon-prepend-category="builder"
          :units="['px', 'rem', 'em']"
          placeholder="8"
          class="ivyforms-mixed-input-field"
          @update:model-value="emit('update:fieldPaddingTopBottomValue', $event)"
          @update:unit="emit('update:fieldPaddingTopBottomUnit', $event)"
        />
      </div>
    </div>

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

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

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

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

      <!-- Active Border 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('border_style')
        }}</label>
        <IvySelectInput
          secondary
          :model-value="fieldActiveBorderStyle"
          :icon-start="getBorderStyleIcon(fieldActiveBorderStyle)"
          icon-start-category="builder"
          class="ivyforms-mixed-input-field"
          @update:model-value="emit('update:fieldActiveBorderStyle', resolveBorderStyle($event))"
        >
          <IvySelectOption
            v-for="option in borderStyleOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </IvySelectInput>
      </div>
    </div>

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

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

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

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

      <!-- Read Only Border 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('border_style')
        }}</label>
        <IvySelectInput
          secondary
          :model-value="fieldReadOnlyBorderStyle"
          :icon-start="getBorderStyleIcon(fieldReadOnlyBorderStyle)"
          icon-start-category="builder"
          class="ivyforms-mixed-input-field"
          @update:model-value="emit('update:fieldReadOnlyBorderStyle', resolveBorderStyle($event))"
        >
          <IvySelectOption
            v-for="option in borderStyleOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </IvySelectInput>
      </div>
    </div>

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

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

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

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

      <!-- Error Border 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('border_style')
        }}</label>
        <IvySelectInput
          secondary
          :model-value="fieldErrorBorderStyle"
          :icon-start="getBorderStyleIcon(fieldErrorBorderStyle)"
          icon-start-category="builder"
          class="ivyforms-mixed-input-field"
          @update:model-value="emit('update:fieldErrorBorderStyle', resolveBorderStyle($event))"
        >
          <IvySelectOption
            v-for="option in borderStyleOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </IvySelectInput>
      </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 IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
import IvyTabs from '@/views/_components/tabs/IvyTabs.vue'
import StyleColorPicker from '../StyleColorPicker.vue'
import IvyDivider from '@/views/_components/divider/IvyDivider.vue'
import { FONT_WEIGHT_OPTIONS } from '@/constants/defaultFormStyles'
import {
  BORDER_STYLE_OPTIONS,
  FONT_STYLE_OPTIONS,
  getBorderStyleIcon,
  resolveBorderStyle,
  resolveFontStyle,
} from '@/utils/styleUtils.ts'
import type { BorderStyle, FontStyle } from '@/utils/styleUtils.ts'

const { getLabel } = useLabels()

const borderStyleOptions = BORDER_STYLE_OPTIONS

const fontWeightOptions = FONT_WEIGHT_OPTIONS

const fontStyleOptions = FONT_STYLE_OPTIONS

defineProps<{
  fieldStatesActiveTab: string
  fieldStatesTabs: Array<{ name: string; label: string }>
  fieldBackground: string
  fieldText: string
  fieldFontWeight: string
  fieldFontStyle: FontStyle
  fieldFontSizeValue: number
  fieldFontSizeUnit: string
  fieldDescriptionColor: string
  fieldBorderColor: string
  fieldBorderStyle: BorderStyle
  isFieldCornerLinked: boolean
  fieldCornerMainValue: number | string
  fieldCornerLinkedUnit: string
  fieldCornerMainPlaceholder: string
  fieldCornerTopLeftValue: number
  fieldCornerTopLeftUnit: string
  fieldCornerTopRightValue: number
  fieldCornerTopRightUnit: string
  fieldCornerBottomRightValue: number
  fieldCornerBottomRightUnit: string
  fieldCornerBottomLeftValue: number
  fieldCornerBottomLeftUnit: string
  fieldBorderWidthValue: number
  fieldBorderWidthUnit: string
  fieldPaddingLeftRightValue: number
  fieldPaddingLeftRightUnit: string
  fieldPaddingTopBottomValue: number
  fieldPaddingTopBottomUnit: string
  fieldActiveBackground: string
  fieldActiveBorderColor: string
  fieldActiveTextColor: string
  fieldActiveDescriptionColor: string
  fieldActiveBorderStyle: BorderStyle
  fieldReadOnlyBackground: string
  fieldReadOnlyBorderColor: string
  fieldReadOnlyTextColor: string
  fieldReadOnlyDescriptionColor: string
  fieldReadOnlyBorderStyle: BorderStyle
  fieldErrorBackground: string
  fieldErrorBorderColor: string
  fieldErrorTextColor: string
  fieldErrorDescriptionColor: string
  fieldErrorBorderStyle: BorderStyle
}>()

const emit = defineEmits<{
  'update:fieldStatesActiveTab': [value: string]
  'update:fieldBackground': [value: string]
  'update:fieldText': [value: string]
  'update:fieldFontWeight': [value: string]
  'update:fieldFontStyle': [value: FontStyle]
  'update:fieldFontSizeValue': [value: number]
  'update:fieldFontSizeUnit': [value: string]
  'update:fieldDescriptionColor': [value: string]
  'update:fieldBorderColor': [value: string]
  'update:fieldBorderStyle': [value: BorderStyle]
  'update:fieldCornerMainValue': [value: number | string]
  'update:fieldCornerLinkedUnit': [value: string]
  'update:fieldCornerTopLeftValue': [value: number]
  'update:fieldCornerTopLeftUnit': [value: string]
  'update:fieldCornerTopRightValue': [value: number]
  'update:fieldCornerTopRightUnit': [value: string]
  'update:fieldCornerBottomRightValue': [value: number]
  'update:fieldCornerBottomRightUnit': [value: string]
  'update:fieldCornerBottomLeftValue': [value: number]
  'update:fieldCornerBottomLeftUnit': [value: string]
  'update:fieldBorderWidthValue': [value: number]
  'update:fieldBorderWidthUnit': [value: string]
  'update:fieldPaddingLeftRightValue': [value: number]
  'update:fieldPaddingLeftRightUnit': [value: string]
  'update:fieldPaddingTopBottomValue': [value: number]
  'update:fieldPaddingTopBottomUnit': [value: string]
  'update:fieldActiveBackground': [value: string]
  'update:fieldActiveBorderColor': [value: string]
  'update:fieldActiveTextColor': [value: string]
  'update:fieldActiveDescriptionColor': [value: string]
  'update:fieldActiveBorderStyle': [value: BorderStyle]
  'update:fieldReadOnlyBackground': [value: string]
  'update:fieldReadOnlyBorderColor': [value: string]
  'update:fieldReadOnlyTextColor': [value: string]
  'update:fieldReadOnlyDescriptionColor': [value: string]
  'update:fieldReadOnlyBorderStyle': [value: BorderStyle]
  'update:fieldErrorBackground': [value: string]
  'update:fieldErrorBorderColor': [value: string]
  'update:fieldErrorTextColor': [value: string]
  'update:fieldErrorDescriptionColor': [value: string]
  'update:fieldErrorBorderStyle': [value: BorderStyle]
  toggleFieldCornerLinked: []
}>()
</script>
