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

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

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

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

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

<script setup lang="ts">
import { useLabels } from '@/composables/useLabels'
import IvyTextInput from '@/views/_components/input/IvyTextInput.vue'
import StyleColorPicker from '../StyleColorPicker.vue'

const { getLabel } = useLabels()

defineProps<{
  selectTagColor: string
  selectTagTextColor: string
  selectOptionHoverColor: string
  selectSelectionTextColor: string
  selectSelectionBackgroundColor: string
}>()

const emit = defineEmits<{
  'update:selectTagColor': [value: string]
  'update:selectTagTextColor': [value: string]
  'update:selectOptionHoverColor': [value: string]
  'update:selectSelectionTextColor': [value: string]
  'update:selectSelectionBackgroundColor': [value: string]
}>()
</script>
