/*eslint no-console: "off" */
import {InitializePicker} from './hsluvpicker';
export default {
    name: 'hsluv-picker',
    props: {
        value: {
            type: String,
            default: "#cccccc",
        },
        nodisplay: {
            type: Boolean,
            default: false,
        },
        displaysize: {
            type: String,
            default: 300,
        },
        horizontal: {
            type: Boolean,
            default: false,
        }
    },
    watch: {
        value: function(newVal){
            if(newVal != this.currentcolor){
                this.$refs.picker.dispatchEvent(new CustomEvent('updatecolor', {detail: newVal}));
                this.currentcolor = newVal;
            }
        }
    },
    data() {
        return {
            currentcolor: "",
        };
    },
    methods: {
        onColorChange(event) {
            this.currentcolor = event.detail;
            this.$emit("input",event.detail);
        }
    },
    mounted(){
        this.currentcolor=this.value;
        InitializePicker(this.$refs.picker, this.value);
    },
    template: `
        <div ref="picker" @colorchange="onColorChange" :class="'vue-hsluv-picker'+(horizontal?' horizontal':'')">
            <div v-if="!nodisplay" class="display">
                <canvas :height="displaysize" :width="displaysize"></canvas>
            </div>
            <table class='picker'>
                <tr class="control-h">
                    <td class="cell-input">
                        <input type="number" min="0" max="360" step="any" class="counter counter-hue" tabindex="0"/>
                    </td>
                    <td><div class="range-slider"></div></td>
                    <td class="picker-label">H</td>
                </tr>
                <tr class="control-s">
                    <td class="cell-input">
                        <input type="number" step="any" min="0" max="100" class="counter counter-saturation"/>
                    </td>
                    <td><div class="range-slider"></div></td>
                    <td class="picker-label">S</td>
                </tr>
                <tr class="control-l">
                    <td class="cell-input">
                        <input type="number" step="any" min="0" max="100" class="counter counter-lightness"/>
                    </td>
                    <td><div class="range-slider"></div></td>
                    <td class="picker-label">L</td>
                </tr>
                <tr>
                    <td class="cell-input cell-input-hex">
                        <input ref="input" class="input-hex" pattern="#?[0-9a-fA-F]{6}"/>
                    </td>
                    <td><div class="swatch"></div></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
`,
};