<!--
    Describe this component...
-->
<template>
    <div style="display: flex; gap: 0.5em">
        <PxColorPaletteButton
            v-for="(color, index) in calcPalette"
            :key="index"
            :hsva="color.hsva"
            :selected="!(pickerActive && isCurrentHsva(pickerHsva)) && isCurrentHsva(color.hsva)"
            @click="onPaletteClick(color)"
        ></PxColorPaletteButton>
        <PxColorPicker
            v-if="showPicker"
            v-bind="calcPickerAttrs"
            :color="pickerHsva"
            :selected="pickerActive && isCurrentHsva(pickerHsva)"
            :pending="pickerPending"
            @click="onPickerClick"
            @change="onPickerChange"
        />
    </div>
</template>

<script>
import PxBaseColor from '../bases/PxBaseColor.vue';
import tinycolor from 'tinycolor2';
import PxColorPaletteButton from './PxColorPaletteButton.vue';
import PxColorPicker from './PxColorPicker.vue';

export default {
    name: 'px-color-palette',
    components: { PxColorPaletteButton, PxColorPicker },
    mixins: [PxBaseColor],
    props: {
        /**
         * Array of colors to display in the palette
         */
        palette: { type: Array, default: () => [] },
        paletteInitColor: { type: String, default: null },

        // none | picker | eyedropper | eyedropper-only
        pickerMode: { type: String, default: 'none' },
        pickerAttrs: { type: Object, default: () => ({}) },
        pickerInitColor: { type: String, default: 'blue' },
        pickerInitSelected: { type: Boolean, default: false },
    },
    data() {
        return {
            pickerActive: this.pickerInitSelected,
            pickerPending: true,
            pickerHsva: this.colorStrToHsva(this.pickerInitColor),
        };
    },
    computed: {
        calcPalette() {
            return this.palette.map(color => {
                const tiny = tinycolor(color);
                return {
                    hsva: tiny.toHsv(),
                    css: tiny.toString(this.alphaEnabled ? 'hex6' : 'rgb'),
                };
            });
        },
        calcPickerAttrs() {
            const eyedropperMode = {
                none: 'none',
                picker: 'none',
                eyedropper: 'popup',
                'eyedropper-only': 'only',
            }[this.pickerMode];

            const iconFallback = {
                none: null,
                picker: 'ellipsis',
                eyedropper: 'ellipsis',
                'eyedropper-only': 'eyedropper',
            }[this.pickerMode];

            return {
                iconFallback,
                eyedropperMode,
                alphaEnabled: this.alphaEnabled,
                ...this.pickerAttrs,
            };
        },
        showPicker() {
            return this.pickerMode != 'none';
        },
    },
    watch: {
        paletteInitColor(val) {
            this.setColorHsva(this.colorStrToHsva(val));
        },
    },
    mounted() {},
    methods: {
        onPaletteClick(color) {
            this.pickerActive = false;
            this.setColorHsva(color.hsva);
            this.$emit('paletteClick');
        },
        onPickerClick() {
            this.pickerActive = true;
            this.$emit('pickerClick');
        },
        onPickerChange(e) {
            if (this.pickerActive) {
                this.pickerPending = false;
                this.pickerHsva = e;
                this.setColorHsva(e);
            }
        },
    },
};
</script>
