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

const formatting = ref<string[]>([])
const alignment = ref('left')

function isSelected(currentValue, value) {
  const isMultiple = Array.isArray(currentValue)
  return isMultiple
    ? currentValue.includes(value)
    : currentValue === value
}

function isMultiple(currentValue) {
  return Array.isArray(currentValue)
}

// Toggle item component
const ToggleItem = defineComponent({
  props: {
    value: {
      type: String,
      required: true
    },
    modelValue: [String, Array],
    icon: {
      type: String,
      required: true
    },
    ariaLabel: String,
    withFocus: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    return () => (
      <Toolbar.ToggleItem value={props.value} asChild={true}>
        <motion.button
          class="toggle-item"
          initial={{ scale: 1, backgroundColor: '#2b323d00' }}
          animate={isSelected(props.modelValue, props.value) && isMultiple(props.modelValue) ? { backgroundColor: '#2b323dff' } : {}}
          whilePress={{ scale: 0.9 }}
          whileFocus={{ boxShadow: "0 0 0 2px #ff0088" }}
          aria-label={props.ariaLabel}
        >
          <span><Icon icon={props.icon} /></span>
          <AnimatePresence initial={false}>
            {isSelected(props.modelValue, props.value) && !isMultiple(props.modelValue) ? (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                class="selected-indicator"
                layoutId="selected-indicator"
              />
            ) : null}
          </AnimatePresence>
        </motion.button>
      </Toolbar.ToggleItem>
    )
  }
})
</script>

<template>
  <Toolbar.Root class="container" aria-label="Formatting options">
    <Toolbar.ToggleGroup
      v-model="formatting"
      class="toggle-group"
      type="multiple"
      aria-label="Text formatting"
    >
      <ToggleItem 
        value="bold" 
        :model-value="formatting" 
        icon="radix-icons:font-bold" 
        aria-label="Bold"
        :with-focus="true"
      />
      <ToggleItem 
        value="italic" 
        :model-value="formatting" 
        icon="radix-icons:font-italic" 
        aria-label="Italic"
        :with-focus="true"
      />
      <ToggleItem 
        value="strikethrough" 
        :model-value="formatting" 
        icon="radix-icons:strikethrough" 
        aria-label="Strike through"
        :with-focus="true"
      />
    </Toolbar.ToggleGroup>
    <Toolbar.Separator class="separator" />
    <Toolbar.ToggleGroup
      class="toggle-group"
      type="single"
      v-model="alignment"
      aria-label="Text alignment"
    >
      <ToggleItem 
        value="left" 
        :model-value="alignment" 
        icon="radix-icons:text-align-left" 
        aria-label="Left aligned"
      />
      <ToggleItem 
        value="center" 
        :model-value="alignment" 
        icon="radix-icons:text-align-center" 
        aria-label="Center aligned"
      />
      <ToggleItem 
        value="right" 
        :model-value="alignment" 
        icon="radix-icons:text-align-right" 
        aria-label="Right aligned"
        :with-focus="true"
      />
    </Toolbar.ToggleGroup>
    <Toolbar.Separator class="separator" />

    <Toolbar.Button class="button" style="margin-left: auto">
      Share
    </Toolbar.Button>
  </Toolbar.Root>
</template>

<style>
/**
 * ==============   Styles   ================
 */
.container {
  display: flex;
  padding: 10px;
  width: 100%;
  max-width: 350px;
  min-width: max-content;
  border-radius: 6px;
  background-color: var(--layer);
  border-radius: 10px;
}

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

.toggle-group {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.toggle-item,
.link,
.button {
  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;
}

.toggle-item {
  position: relative;
}

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

.separator {
  width: 1px;
  background-color: var(--border);
  margin: 0 10px;
}

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

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

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

.button {
  padding-left: 15px;
  padding-right: 15px;
  font-size: 16px;
  color: #f5f5f5;
  background-color: #ff0088;
}

.button:hover {
  background-color: #ff0088;
}
</style>