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

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

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

const emit = defineEmits<{
  'update:dateTimeCalendarBackground': [value: string]
  'update:dateTimeNumberTextColor': [value: string]
  'update:dateTimeSelectionColor': [value: string]
}>()
</script>
