<template>
  <div class="ivyforms-advanced-mode-controls__section ivyforms-pb-16 ivyforms-pr-8">
    <!-- Icon 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('icon_size')
      }}</label>
      <IvyMixedInput
        :model-value="ratingIconSizeValue"
        :unit="ratingIconSizeUnit"
        secondary
        icon-prepend="size-text"
        icon-prepend-category="builder"
        :units="['px', 'rem', 'em']"
        placeholder="24"
        class="ivyforms-mixed-input-field"
        @update:model-value="emit('update:ratingIconSizeValue', $event)"
        @update:unit="emit('update:ratingIconSizeUnit', $event)"
      />
    </div>

    <!-- Icon 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('icon_color')
      }}</label>
      <div class="ivyforms-color-input-wrapper">
        <StyleColorPicker
          :model-value="ratingIconColor"
          @update:model-value="emit('update:ratingIconColor', $event)"
        >
          <template #reference>
            <IvyTextInput
              :model-value="ratingIconColor"
              class="ivyforms-color-text-input ivyforms-width-100"
              secondary
              @update:model-value="emit('update:ratingIconColor', $event)"
            >
              <template #suffix>
                <div class="ivyforms-color-preview" :style="{ backgroundColor: ratingIconColor }" />
              </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 IvyMixedInput from '@/views/_components/input/IvyMixedInput.vue'
import StyleColorPicker from '../StyleColorPicker.vue'

const { getLabel } = useLabels()

defineProps<{
  ratingIconSizeValue: number | null
  ratingIconSizeUnit: string
  ratingIconColor: string
}>()

const emit = defineEmits<{
  'update:ratingIconSizeValue': [value: number | null]
  'update:ratingIconSizeUnit': [value: string]
  'update:ratingIconColor': [value: string]
}>()
</script>
