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

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

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

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

    <!-- 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="isConfirmationCornerLinked ? 'secondary' : 'tertiary'"
            :icon-start="isConfirmationCornerLinked ? 'link' : 'link-broken'"
            icon-start-category="global"
            :icon-only="true"
            :aria-label="
              isConfirmationCornerLinked ? getLabel('unlink_corners') : getLabel('link_corners')
            "
            @click="emit('toggleConfirmationCornerLinked')"
          />
          <IvyMixedInput
            secondary
            :model-value="confirmationCornerMainValue"
            :unit="confirmationCornerLinkedUnit"
            icon-prepend="corner-all"
            icon-prepend-category="builder"
            :units="['px', 'rem', 'em', '%']"
            :placeholder="confirmationCornerMainPlaceholder"
            :disabled="!isConfirmationCornerLinked"
            class="ivyforms-mixed-input-field ivyforms-mixed-input-field--full"
            @update:model-value="emit('update:confirmationCornerMainValue', $event)"
            @update:unit="emit('update:confirmationCornerLinkedUnit', $event)"
          />
        </div>
      </div>
    </div>
    <div v-if="!isConfirmationCornerLinked" class="ivyforms-corner-grid ivyforms-pb-8">
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="confirmationCornerTopLeftValue"
          :unit="confirmationCornerTopLeftUnit"
          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:confirmationCornerTopLeftValue', $event)"
          @update:unit="emit('update:confirmationCornerTopLeftUnit', $event)"
        />
      </div>
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="confirmationCornerTopRightValue"
          :unit="confirmationCornerTopRightUnit"
          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:confirmationCornerTopRightValue', $event)"
          @update:unit="emit('update:confirmationCornerTopRightUnit', $event)"
        />
      </div>
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="confirmationCornerBottomLeftValue"
          :unit="confirmationCornerBottomLeftUnit"
          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:confirmationCornerBottomLeftValue', $event)"
          @update:unit="emit('update:confirmationCornerBottomLeftUnit', $event)"
        />
      </div>
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="confirmationCornerBottomRightValue"
          :unit="confirmationCornerBottomRightUnit"
          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:confirmationCornerBottomRightValue', $event)"
          @update:unit="emit('update:confirmationCornerBottomRightUnit', $event)"
        />
      </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 StyleColorPicker from '../StyleColorPicker.vue'
import { BORDER_STYLE_OPTIONS, getBorderStyleIcon, resolveBorderStyle } from '@/utils/styleUtils.ts'
import type { BorderStyle } from '@/utils/styleUtils.ts'

const { getLabel } = useLabels()

const borderStyleOptions = BORDER_STYLE_OPTIONS

defineProps<{
  confirmationBorderColor: string
  confirmationBorderStyle: BorderStyle
  confirmationBackgroundColor: string
  confirmationBorderWidthValue: number
  confirmationBorderWidthUnit: string
  isConfirmationCornerLinked: boolean
  confirmationCornerMainValue: number | string
  confirmationCornerLinkedUnit: string
  confirmationCornerMainPlaceholder: string
  confirmationCornerTopLeftValue: number
  confirmationCornerTopLeftUnit: string
  confirmationCornerTopRightValue: number
  confirmationCornerTopRightUnit: string
  confirmationCornerBottomRightValue: number
  confirmationCornerBottomRightUnit: string
  confirmationCornerBottomLeftValue: number
  confirmationCornerBottomLeftUnit: string
}>()

const emit = defineEmits<{
  'update:confirmationBorderColor': [value: string]
  'update:confirmationBorderStyle': [value: BorderStyle]
  'update:confirmationBackgroundColor': [value: string]
  'update:confirmationBorderWidthValue': [value: number]
  'update:confirmationBorderWidthUnit': [value: string]
  'update:confirmationCornerMainValue': [value: number | string]
  'update:confirmationCornerLinkedUnit': [value: string]
  'update:confirmationCornerTopLeftValue': [value: number]
  'update:confirmationCornerTopLeftUnit': [value: string]
  'update:confirmationCornerTopRightValue': [value: number]
  'update:confirmationCornerTopRightUnit': [value: string]
  'update:confirmationCornerBottomRightValue': [value: number]
  'update:confirmationCornerBottomRightUnit': [value: string]
  'update:confirmationCornerBottomLeftValue': [value: number]
  'update:confirmationCornerBottomLeftUnit': [value: string]
  toggleConfirmationCornerLinked: []
}>()
</script>
