<script setup lang="ts">
import { computed } from 'vue'
import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
import { colorToCSS } from '@open-pencil/core'

import type { Color } from '@open-pencil/core'

const props = defineProps<{
  color: Color
  contentClass?: string
  swatchClass?: string
}>()

const emit = defineEmits<{ update: [color: Color] }>()

const swatchBg = computed(() => colorToCSS(props.color))
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger as-child>
      <slot name="trigger" :style="{ background: swatchBg }">
        <button :class="swatchClass" :style="{ background: swatchBg }" />
      </slot>
    </PopoverTrigger>

    <PopoverPortal>
      <PopoverContent
        data-test-id="color-picker-popover"
        :class="contentClass"
        :side-offset="4"
        side="left"
      >
        <slot :color="color" :update="(nextColor: Color) => emit('update', nextColor)" />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>
