<template>
  <div class="d-flex ga-2 flex-nowrap overflow-x-auto">
    <template v-for="colour in colours">
      <v-btn
        rounded
        :size="size"
        variant="text"
        :style="{ 'background-color': colour }"
        @click="modelValue = colour"
      >
        <v-icon
          v-if="matches(colour)"
          color="white"
          icon="check"
        />
      </v-btn>
    </template>
    <v-menu :close-on-content-click="false">
      <template #activator="{ props: menu }">
        <v-tooltip
          location="bottom"
          open-delay="1000"
        >
          <template #activator="{ props: tooltip }">
            <v-btn
              v-bind="mergeProps(menu, tooltip)"
              data-testid="menu"
              :icon="true"
              :size="size"
              variant="outlined"
              style="color: gray"
            >
              <v-icon
                icon="colorize"
                size="16"
                color="shark_400"
              />
            </v-btn>
          </template>
          <span>{{ t('labels.customColour') }}</span>
        </v-tooltip>
      </template>
      <v-color-picker
        v-model="modelValue"
        mode="rgba"
        variant="outlined"
        class="new-style pb-0"
        style="background-color: white"
      />
    </v-menu>
  </div>
</template>

<script setup lang="ts">
import { mergeProps } from 'vue';
import { useI18n } from 'vue-i18n';

interface Props {
  colours?: string[];
  size?: number | string;
}

withDefaults(defineProps<Props>(), {
  colours: () => [
    '#C9D7FC',
    '#8599F4',
    '#4C4FDF',
    '#34359F',
    '#C3DEF4',
    '#50A5DE',
    '#1C6EAD',
    '#184B74',
    '#F8D3D4',
    '#EB818A',
    '#CA344A',
    '#8E2338',
  ],
  size: 24,
});

const { t } = useI18n();

const modelValue = defineModel<string>({ default: '' });

function matches(value: string): boolean {
  return modelValue.value.toLowerCase() === value.toLowerCase();
}
</script>
