<script setup lang="tsx">
/** @jsxImportSource vue */
import { defineComponent, ref } from 'vue'
import { motion, AnimatePresence } from 'motion-v'
import { Icon } from '@iconify/vue'
import { ToggleGroup } from 'reka-ui/namespaced'

const alignment = ref('left')

// Toggle item component to avoid code duplication
const ToggleItem = defineComponent({
  props: {
    value: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    currentValue: {
      type: String,
      required: true
    }
  },
  setup(props) {
    return () => (
      <ToggleGroup.Item value={props.value} asChild>
        <motion.button
          initial={{ scale: 1, backgroundColor: '#2b323d00' }}
          whilePress={{ scale: 0.9 }}
          whileFocus={{ boxShadow: '0 0 0 2px #ff0088' }}
          class="toggle-item"
          aria-label={props.label}
        >
          <span>
            <Icon icon={props.icon} />
          </span>
          <AnimatePresence initial={false}>
            {props.currentValue === props.value ? (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                class="selected-indicator"
                layoutId="selected-indicator"
              />
            ) : null}
          </AnimatePresence>
        </motion.button>
      </ToggleGroup.Item>
    )
  }
})
</script>

<template>
  <ToggleGroup.Root
    type="single"
    v-model="alignment"
    aria-label="Text alignment"
    class="container"
  >
    <ToggleItem 
      value="left" 
      icon="radix-icons:text-align-left" 
      label="Left aligned" 
      :currentValue="alignment" 
    />
    
    <ToggleItem 
      value="center" 
      icon="radix-icons:text-align-center" 
      label="Center aligned" 
      :currentValue="alignment" 
    />
    
    <ToggleItem 
      value="right" 
      icon="radix-icons:text-align-right" 
      label="Right aligned" 
      :currentValue="alignment" 
    />
  </ToggleGroup.Root>
</template>

<style>
.container {
  display: flex;
  padding: 10px;
  min-width: max-content;
  border-radius: 6px;
  background-color: var(--layer);
  border-radius: 10px;
  gap: 5px;
}

.container svg {
  width: 24px;
  height: 24px;
}

.toggle-item {
  flex: 0 0 auto;
  color: #f5f5f5;
  padding: 8px;
  border-radius: 4px;
  display: inline-flex;
  font-size: 14px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  position: relative;
}

.toggle-item > span {
  position: relative;
  z-index: 1;
}

@media (max-width: 520px) {
  .toggle-item {
    padding: 5px;
  }

  .container svg {
    width: 16px;
    height: 16px;
  }
}

.selected-indicator {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #2b323dff;
  border-radius: 5px;
  mix-blend-mode: lighten;
}
</style>