<script setup lang="ts">
import { ref } from 'vue'
import { motion, AnimatePresence } from 'motion-v'
import { Select } from 'reka-ui/namespaced'
import { Icon } from '@iconify/vue'

const open = ref(false)
const value = ref('Apple')

const fruits = ['Apple', 'Banana', 'Orange', 'Grape']
</script>

<template>
  <Select.Root
    v-model:open="open"
    v-model="value"
  >
    <Select.Trigger class="trigger" :as-child="true">
      <motion.button
        :while-hover="{ scale: 1.02 }"
        :while-press="{ scale: 0.98 }"
        style="will-change: transform"
      >
        <Select.Value :placeholder="'Select a fruit...'" />
        <Select.Icon>
          <Icon icon="mdi:chevron-down" />
        </Select.Icon>
      </motion.button>
    </Select.Trigger>

    <Select.Portal>
      <AnimatePresence>
        <Select.Content :side-offset="5" :as-child="true">
          <motion.div
            class="content"
            :initial="{ opacity: 0, scale: 0.5 }"
            :animate="{ opacity: 1, scale: 1 }"
            :exit="{ opacity: 0, scale: 0.5 }"
            :transition="{
              duration: 0.2,
              scale: {
                type: 'spring',
                visualDuration: 0.3,
                bounce: 0.5,
              },
            }"
            style="will-change: transform, opacity"
          >
            <Select.Viewport class="viewport">
              <Select.Item
                v-for="fruit in fruits"
                :key="fruit"
                :value="fruit"
                class="item"
                :as-child="true"
              >
                <motion.div
                  :initial="{ backgroundColor: 'var(--layer)' }"
                  :while-hover="{ backgroundColor: '#9911ff' }"
                  :transition="{ duration: 0.1, ease: 'linear' }"
                  style="will-change: background-color"
                >
                  <Select.ItemText>
                    {{ fruit }}
                  </Select.ItemText>
                </motion.div>
              </Select.Item>
            </Select.Viewport>
          </motion.div>
        </Select.Content>
      </AnimatePresence>
    </Select.Portal>
  </Select.Root>
</template>

<style>
.trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  padding: 0 15px;
  font-size: 16px;
  line-height: 1;
  height: 35px;
  gap: 5px;
  width: 200px;
  background-color: var(--layer);
  color: #f5f5f5;
  border: 1px solid var(--border);
}

.trigger:focus {
  box-shadow: 0 0 0 2px #0f1115;
}

.content {
  overflow: hidden;
  background-color: var(--layer);
  color: #f5f5f5;
  border: 1px solid var(--border);
  border-radius: 5px;
}

.viewport {
  padding: 5px;
}

.item {
  font-size: 16px;
  line-height: 1;
  border-radius: 3px;
  display: flex;
  align-items: center;
  height: 25px;
  padding-right: 35px;
  padding-left: 25px;
  position: relative;
  user-select: none;
  cursor: pointer;
}

.item[data-disabled] {
  color: var(--gray-500);
  pointer-events: none;
}

.item[data-highlighted] {
  outline: none;
  background-color: #0f1115;
  color: #f5f5f5;
}
</style>