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

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

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

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

    <!-- Form 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('form_border_style')
      }}</label>
      <IvySelectInput
        secondary
        :model-value="formBorderStyle"
        :icon-start="getBorderStyleIcon(formBorderStyle)"
        icon-start-category="builder"
        icon-start-type="outline"
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:formBorderStyle', 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" />

    <!-- Vertical Spacing -->
    <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('vertical_spacing')
      }}</label>
      <IvyMixedInput
        secondary
        :model-value="verticalSpacingValue"
        :unit="verticalSpacingUnit"
        icon-prepend="size-height"
        icon-prepend-category="builder"
        :units="['px', 'rem', 'em']"
        placeholder="16"
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:verticalSpacingValue', $event)"
        @update:unit="emit('update:verticalSpacingUnit', $event)"
      />
    </div>

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

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

    <!-- Form 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('form_alignment')
      }}</label>
      <AlignmentControl
        :model-value="formAlignment"
        @update:model-value="emit('update:formAlignment', $event)"
      />
    </div>

    <!-- Form 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('form_padding_left_right')
      }}</label>
      <IvyMixedInput
        secondary
        :model-value="formPaddingLeftRightValue"
        :unit="formPaddingLeftRightUnit"
        icon-prepend="margin-left-right"
        icon-prepend-category="builder"
        :units="['px', 'rem', 'em']"
        placeholder="24"
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:formPaddingLeftRightValue', $event)"
        @update:unit="emit('update:formPaddingLeftRightUnit', $event)"
      />
    </div>

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

    <!-- Form 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('form_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="isFormCornerLinked ? 'secondary' : 'tertiary'"
            :icon-start="isFormCornerLinked ? 'link' : 'link-broken'"
            icon-start-category="global"
            :icon-only="true"
            :aria-label="isFormCornerLinked ? getLabel('unlink_corners') : getLabel('link_corners')"
            @click="emit('toggleFormCornerLinked')"
          />
          <IvyMixedInput
            secondary
            :model-value="formCornerMainValue"
            :unit="formCornerLinkedUnit"
            icon-prepend="corner-all"
            icon-prepend-category="builder"
            :units="['px', 'rem', 'em', '%']"
            :placeholder="formCornerMainPlaceholder"
            :disabled="!isFormCornerLinked"
            class="ivyforms-mixed-input-field ivyforms-mixed-input-field--full"
            @update:model-value="emit('update:formCornerMainValue', $event)"
            @update:unit="emit('update:formCornerLinkedUnit', $event)"
          />
        </div>
      </div>
    </div>
    <div v-if="!isFormCornerLinked" class="ivyforms-corner-grid ivyforms-pb-8">
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="formCornerTopLeftValue"
          :unit="formCornerTopLeftUnit"
          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:formCornerTopLeftValue', $event)"
          @update:unit="emit('update:formCornerTopLeftUnit', $event)"
        />
      </div>
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="formCornerTopRightValue"
          :unit="formCornerTopRightUnit"
          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:formCornerTopRightValue', $event)"
          @update:unit="emit('update:formCornerTopRightUnit', $event)"
        />
      </div>
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="formCornerBottomLeftValue"
          :unit="formCornerBottomLeftUnit"
          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:formCornerBottomLeftValue', $event)"
          @update:unit="emit('update:formCornerBottomLeftUnit', $event)"
        />
      </div>
      <div class="ivyforms-corner-grid-item">
        <IvyMixedInput
          secondary
          :model-value="formCornerBottomRightValue"
          :unit="formCornerBottomRightUnit"
          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:formCornerBottomRightValue', $event)"
          @update:unit="emit('update:formCornerBottomRightUnit', $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 AlignmentControl from '../AlignmentControl.vue'
import IvyDivider from '@/views/_components/divider/IvyDivider.vue'
import type { Alignment } from '@/utils/styleUtils.ts'
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<{
  formBackground: string
  formBorderColor: string
  formBorderStyle: BorderStyle
  formBorderWidthValue: number
  formBorderWidthUnit: string
  formPaddingLeftRightValue: number
  formPaddingLeftRightUnit: string
  formPaddingTopBottomValue: number
  formPaddingTopBottomUnit: string
  verticalSpacingValue: number
  verticalSpacingUnit: string
  horizontalSpacingValue: number
  horizontalSpacingUnit: string
  formAlignment: Alignment
  isFormCornerLinked: boolean
  formCornerMainValue: number | string
  formCornerLinkedUnit: string
  formCornerMainPlaceholder: string
  formCornerTopLeftValue: number
  formCornerTopLeftUnit: string
  formCornerTopRightValue: number
  formCornerTopRightUnit: string
  formCornerBottomRightValue: number
  formCornerBottomRightUnit: string
  formCornerBottomLeftValue: number
  formCornerBottomLeftUnit: string
}>()

const emit = defineEmits<{
  'update:formBackground': [value: string]
  'update:formBorderColor': [value: string]
  'update:formBorderStyle': [value: BorderStyle]
  'update:formBorderWidthValue': [value: number]
  'update:formBorderWidthUnit': [value: string]
  'update:formPaddingLeftRightValue': [value: number]
  'update:formPaddingLeftRightUnit': [value: string]
  'update:formPaddingTopBottomValue': [value: number]
  'update:formPaddingTopBottomUnit': [value: string]
  'update:verticalSpacingValue': [value: number]
  'update:verticalSpacingUnit': [value: string]
  'update:horizontalSpacingValue': [value: number]
  'update:horizontalSpacingUnit': [value: string]
  'update:formAlignment': [value: Alignment]
  'update:formCornerMainValue': [value: number | string]
  'update:formCornerLinkedUnit': [value: string]
  'update:formCornerTopLeftValue': [value: number]
  'update:formCornerTopLeftUnit': [value: string]
  'update:formCornerTopRightValue': [value: number]
  'update:formCornerTopRightUnit': [value: string]
  'update:formCornerBottomRightValue': [value: number]
  'update:formCornerBottomRightUnit': [value: string]
  'update:formCornerBottomLeftValue': [value: number]
  'update:formCornerBottomLeftUnit': [value: string]
  toggleFormCornerLinked: []
}>()
</script>
