<style type="text/css">
.vc-chrome {
    position: absolute;
    z-index: 50;
    top: 3rem;
}
</style>

<template>
    <div class="mt-1 relative flex rounded-sm shadow-sm" ref="colorpicker">

        <input class="form-input block w-full rounded-none rounded-l-sm sm:text-sm sm:leading-5"
               type="text"
               :name="name"
               v-model="colorValue"
               @focus="showPicker()"
               @input="updateFromInput"
        />

        <button
            class="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-400 text-sm font-medium rounded-none rounded-r-sm text-white focus:outline-none"
            :style="'background-color: ' + colorValue"
            type="button"
            @click.prevent="togglePicker()"
        >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
            >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
                ></path>
            </svg>
        </button>

        <chrome-picker v-if="displayPicker"
                       :value="colors"
                       @input="updateFromPicker"
        />
    </div>
</template>

<script>
import VueColor from "vue-color";

export default {
    components : {
        'chrome-picker' : VueColor.Chrome,
    },
    props : [
        'name',
        'value'
    ],
    data() {
        return {
            colors : {
                hex : '#000000',
            },
            colorValue : '',
            displayPicker : false,
        }
    },
    methods : {
        setColor(color) {
            this.updateColors(color);
            this.colorValue = color;
        },
        updateColors(color) {
            if (color.slice(0, 1) == '#') {
                this.colors = {
                    hex : color
                };
            } else if (color.slice(0, 4) == 'rgba') {
                var rgba = color.replace(/^rgba?\(|\s+|\)$/g, '').split(','),
                    hex = '#' + ((1 << 24) + (parseInt(rgba[0]) << 16) + (parseInt(rgba[1]) << 8) + parseInt(rgba[2])).toString(16).slice(1);
                this.colors = {
                    hex : hex,
                    a : rgba[3],
                }
            }
        },
        showPicker() {
            document.addEventListener('click', this.documentClick);
            this.displayPicker = true;
        },
        hidePicker() {
            document.removeEventListener('click', this.documentClick);
            this.displayPicker = false;
        },
        togglePicker() {
            this.displayPicker ? this.hidePicker() : this.showPicker();
        },
        updateFromInput() {
            this.updateColors(this.colorValue);
        },
        updateFromPicker(color) {
            this.colors = color;
            if (color.rgba.a == 1) {
                this.colorValue = color.hex;
            } else {
                this.colorValue = 'rgba(' + color.rgba.r + ', ' + color.rgba.g + ', ' + color.rgba.b + ', ' + color.rgba.a + ')';
            }
        },
        documentClick(e) {
            var el = this.$refs.colorpicker,
                target = e.target;
            if (el !== target && !el.contains(target)) {
                this.hidePicker()
            }
        }
    },
    watch : {
        colorValue(val) {
            if (val) {
                this.updateColors(val);
                this.$emit('input', val);
            }
        }
    },
    mounted() {
        this.setColor(this.value || '#000000');
    },
}
</script>
