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

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

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

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

    <!-- Button 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="buttonFontSizeValue"
        :unit="buttonFontSizeUnit"
        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:buttonFontSizeValue', $event)"
        @update:unit="emit('update:buttonFontSizeUnit', $event)"
      />
    </div>

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

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

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

    <!-- Button 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('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="isButtonCornerLinked ? 'secondary' : 'tertiary'"
            :icon-start="isButtonCornerLinked ? 'link' : 'link-broken'"
            icon-start-category="global"
            :icon-only="true"
            :aria-label="
              isButtonCornerLinked ? getLabel('unlink_corners') : getLabel('link_corners')
            "
            @click="emit('toggleButtonCornerLinked')"
          />
          <IvyMixedInput
            secondary
            :model-value="buttonCornerMainValue"
            :unit="buttonCornerLinkedUnit"
            icon-prepend="corner-all"
            icon-prepend-category="builder"
            :units="['px', 'rem', 'em', '%']"
            :placeholder="buttonCornerMainPlaceholder"
            :disabled="!isButtonCornerLinked"
            class="ivyforms-mixed-input-field ivyforms-mixed-input-field--full"
            @update:model-value="emit('update:buttonCornerMainValue', $event)"
            @update:unit="emit('update:buttonCornerLinkedUnit', $event)"
          />
        </div>
      </div>
    </div>
    <div v-if="!isButtonCornerLinked" class="ivyforms-corner-grid ivyforms-pb-8">
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="buttonCornerTopLeftValue"
          :unit="buttonCornerTopLeftUnit"
          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:buttonCornerTopLeftValue', $event)"
          @update:unit="emit('update:buttonCornerTopLeftUnit', $event)"
        />
      </div>
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="buttonCornerTopRightValue"
          :unit="buttonCornerTopRightUnit"
          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:buttonCornerTopRightValue', $event)"
          @update:unit="emit('update:buttonCornerTopRightUnit', $event)"
        />
      </div>
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="buttonCornerBottomLeftValue"
          :unit="buttonCornerBottomLeftUnit"
          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:buttonCornerBottomLeftValue', $event)"
          @update:unit="emit('update:buttonCornerBottomLeftUnit', $event)"
        />
      </div>
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="buttonCornerBottomRightValue"
          :unit="buttonCornerBottomRightUnit"
          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:buttonCornerBottomRightValue', $event)"
          @update:unit="emit('update:buttonCornerBottomRightUnit', $event)"
        />
      </div>
    </div>

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

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

    <!-- Button 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="buttonPaddingTopBottomValue"
        :unit="buttonPaddingTopBottomUnit"
        secondary
        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:buttonPaddingTopBottomValue', $event)"
        @update:unit="emit('update:buttonPaddingTopBottomUnit', $event)"
      />
    </div>

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

    <!-- Button 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('button_width')
      }}</label>
      <IvyMixedInput
        :model-value="buttonWidthValue"
        :unit="buttonWidthUnit"
        secondary
        icon-prepend="size-width"
        icon-prepend-category="builder"
        :units="['px', 'rem', 'em', '%', 'auto']"
        placeholder="auto"
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:buttonWidthValue', $event)"
        @update:unit="emit('update:buttonWidthUnit', $event)"
      />
    </div>

    <!-- Button Height -->
    <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('button_height')
      }}</label>
      <IvyMixedInput
        :model-value="buttonHeightValue"
        :unit="buttonHeightUnit"
        secondary
        icon-prepend="size-height"
        icon-prepend-category="builder"
        :units="['px', 'rem', 'em', '%', 'auto']"
        placeholder="auto"
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:buttonHeightValue', $event)"
        @update:unit="emit('update:buttonHeightUnit', $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 IvyButtonAction from '@/views/_components/button/IvyButtonAction.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<{
  buttonBackground: string
  buttonBorderColor: string
  buttonText: string
  buttonFontWeight: string
  buttonFontStyle: FontStyle
  buttonFontSizeValue: number | null
  buttonFontSizeUnit: string
  buttonBorderWidthValue: number
  buttonBorderWidthUnit: string
  isButtonCornerLinked: boolean
  buttonCornerMainValue: number | string
  buttonCornerLinkedUnit: string
  buttonCornerMainPlaceholder: string
  buttonCornerTopLeftValue: number
  buttonCornerTopLeftUnit: string
  buttonCornerTopRightValue: number
  buttonCornerTopRightUnit: string
  buttonCornerBottomRightValue: number
  buttonCornerBottomRightUnit: string
  buttonCornerBottomLeftValue: number
  buttonCornerBottomLeftUnit: string
  buttonPaddingLeftRightValue: number | null
  buttonPaddingLeftRightUnit: string
  buttonPaddingTopBottomValue: number | null
  buttonPaddingTopBottomUnit: string
  buttonWidthValue: number | null
  buttonWidthUnit: string
  buttonHeightValue: number | null
  buttonHeightUnit: string
}>()

const emit = defineEmits<{
  'update:buttonBackground': [value: string]
  'update:buttonBorderColor': [value: string]
  'update:buttonText': [value: string]
  'update:buttonFontWeight': [value: string]
  'update:buttonFontStyle': [value: FontStyle]
  'update:buttonFontSizeValue': [value: number | null]
  'update:buttonFontSizeUnit': [value: string]
  'update:buttonBorderWidthValue': [value: number]
  'update:buttonBorderWidthUnit': [value: string]
  'update:buttonCornerMainValue': [value: number | string]
  'update:buttonCornerLinkedUnit': [value: string]
  'update:buttonCornerTopLeftValue': [value: number]
  'update:buttonCornerTopLeftUnit': [value: string]
  'update:buttonCornerTopRightValue': [value: number]
  'update:buttonCornerTopRightUnit': [value: string]
  'update:buttonCornerBottomRightValue': [value: number]
  'update:buttonCornerBottomRightUnit': [value: string]
  'update:buttonCornerBottomLeftValue': [value: number]
  'update:buttonCornerBottomLeftUnit': [value: string]
  'update:buttonPaddingLeftRightValue': [value: number | null]
  'update:buttonPaddingLeftRightUnit': [value: string]
  'update:buttonPaddingTopBottomValue': [value: number | null]
  'update:buttonPaddingTopBottomUnit': [value: string]
  'update:buttonWidthValue': [value: number | null]
  'update:buttonWidthUnit': [value: string]
  'update:buttonHeightValue': [value: number | null]
  'update:buttonHeightUnit': [value: string]
  toggleButtonCornerLinked: []
}>()
</script>
