<template>
  <div class="ivyforms-alignment-control">
    <label class="ivyforms-alignment-control__label">{{ label }}</label>
    <IvyTabs
      :key="props.modelValue"
      v-model="activeTab"
      :tabs="alignmentTabs"
      priority="secondary"
      type="tonal"
      tab-style="stroke"
      class="ivyforms-alignment-control__tabs"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import IvyTabs from '@/views/_components/tabs/IvyTabs.vue'
import type { Alignment } from '@/utils/styleUtils.ts'

interface Props {
  modelValue: Alignment
  label?: string
}

const props = defineProps<Props>()
const emit = defineEmits<{
  'update:modelValue': [value: Alignment]
}>()

const alignmentTabs = computed(() => {
  const currentValue = props.modelValue
  return [
    {
      name: 'left',
      label: '',
      iconConfig: {
        name: 'align-left',
        type: 'outline' as const,
        category: 'builder' as const,
        size: 's' as const,
        color:
          currentValue === 'left' ? 'var(--map-base-purple-symbol-0)' : 'var(--map-base-neutral-3)',
        colorHover:
          currentValue === 'left' ? 'var(--map-base-purple-symbol-0)' : 'var(--map-base-neutral-2)',
      },
    },
    {
      name: 'center',
      label: '',
      iconConfig: {
        name: 'align-center',
        type: 'outline' as const,
        category: 'builder' as const,
        size: 's' as const,
        color:
          currentValue === 'center'
            ? 'var(--map-base-purple-symbol-0)'
            : 'var(--map-base-neutral-3)',
        colorHover:
          currentValue === 'center'
            ? 'var(--map-base-purple-symbol-0)'
            : 'var(--map-base-neutral-2)',
      },
    },
    {
      name: 'right',
      label: '',
      iconConfig: {
        name: 'align-right',
        type: 'outline' as const,
        category: 'builder' as const,
        size: 's' as const,
        color:
          currentValue === 'right'
            ? 'var(--map-base-purple-symbol-0)'
            : 'var(--map-base-neutral-3)',
        colorHover:
          currentValue === 'right'
            ? 'var(--map-base-purple-symbol-0)'
            : 'var(--map-base-neutral-2)',
      },
    },
  ]
})

const activeTab = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value as Alignment),
})
</script>

<style lang="scss" scoped>
.ivyforms-alignment-control {
  &__tabs {
    width: 240px;
  }
}
</style>
