<script lang="ts" setup>
import { defineModel } from 'vue';
import type { UColorPanelProps, UColorPickerProps } from './types';
import UColorPanel from './UColorPanel.vue';

const props = withDefaults(
  defineProps<UColorPickerProps>(),
  {
    trigger: 'hover',
    disabled: false,
    width: '25px',
    height: '25px'
  }
);

const emits = defineEmits<{
  (e: 'change', value: string): void;
}>();

const modelValue = defineModel<string>('value', { required: false });
const handleColorChange: UColorPanelProps['onChange'] = value => {
  emits('change', value);
};
</script>

<template>
  <a-popover :title="null" :trigger="trigger" :disabled="disabled">
    <template #content>
      <UColorPanel
        v-model:value="modelValue"
        :presets="presets"
        class="u-color-picker-panel"
        @change="handleColorChange"
      />
    </template>
    <div class="u-color-picker" :style="{ backgroundColor: modelValue, width, height }">
      <slot />
    </div>
  </a-popover>
</template>

<style scoped>
.u-color-picker {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: #eeeeee 1px solid;
  border-radius: 4px;
}
.u-color-picker-panel {
  width: 270px;
}
</style>
