// Import the Lasal Runtime base element into your component
// Import SigPolymer to use Polymer methods: html, afterNextRender, beforeNextRender, debouncer, timeOut
// or if your component's getter template() returns a HTML literal
import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';
//ColorpickerBase with functionality shared by all colorpickers
import LasalRuntimeSigControlColorpickerBase from './sig-control-colorpicker-base.js';

/****************************************************************************************************
 * @class LasalRuntimeSigControlColorpickerGrid
 * @extends {LasalRuntimeSigControlColorpickerBase}
 ****************************************************************************************************/
export class LasalRuntimeSigControlColorpickerGrid extends LasalRuntimeSigControlColorpickerBase {
    
    /****************************************************************************************************
     * When the element is loaded, importMeta() assigns reference to the path from 
     * which an element was imported to its importPath property. 
     * Relative URLs in styles are automatically re-written to be relative to the importPath property. 
     * You can use [[importPath]] in your component to load url resources
     * 
     * @readonly
     * @static
     ****************************************************************************************************/
    static get importMeta() {
        return import.meta;
    }

    /****************************************************************************************************
     * Return the component style and template as a template literal
     *
     * @readonly
     * @static
     ****************************************************************************************************/
    static get template() {
        return SigPolymer.html`
    <style include="sig-element-css">
            :host {
                /* Basic styling of the component */
                color: var(--theme-sig-control-colorpicker-grid-color, inherit);
                background-color: var(--theme-sig-control-colorpicker-grid-background-color, transparent);
                border-width: var(--theme-sig-control-colorpicker-grid-border-width, inherit);
                border-color: var(--theme-sig-control-colorpicker-grid-border-color, inherit);
                border-style: var(--theme-sig-control-colorpicker-grid-border-style, none);
                border-radius: var(--theme-sig-control-colorpicker-grid-border-radius, none);

                /* Basic box model settings */
                display: block;
                position: absolute;
                overflow: hidden;


                height: auto;
                width: auto;

                z-index: 7;
            }

            :host * {
                /* Reset margin and paddings for child elements and turn of text selection */
                @apply --notextselect;
                margin: 0;
                padding: 0;
            }

            .clearfix:after {
                @apply --clearfix
            }

            .sig-control-colorpicker-grid {
                box-sizing: border-box;
                height: 100%;
                width: 100%;
                position: relative;
                border-width: var(--theme-sig-control-colorpicker-picker-border-width, 0px);
                border-style: var(--theme-sig-control-colorpicker-picker-border-style, none);
                border-color: var(--theme-sig-control-colorpicker-picker-border-color, transparent);
                border-radius: var(--theme-sig-control-colorpicker-picker-border-radius, 3px);
                background-color: var(--theme-sig-control-colorpicker-picker-background-color, rgba(255,255,255,1));
            }

            #colorSelectArea {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
            }

            .color {
                height: var(--theme-sig-control-colorpicker-picker-color-grid-cell-height, 50px);
                width: var(--theme-sig-control-colorpicker-picker-color-grid-cell-width, 100px);
                box-sizing: border-box;
                border: 1px solid black;
                margin: 1px
            }

            .color.active {
                border-color: var(--theme-sig-control-colorpicker-picker-grid-cell-active-border-color, transparent);
            }

            sig-control-input,
            sig-control-button {
                --theme-sig-element-top: 0;
                --theme-sig-element-left: 0;
                display: inline-block;
                position: relative;

            }

            sig-control-input {
                --theme-sig-element-height: var(--theme-sig-control-colorpicker-picker-input-height, 35px);
                --theme-sig-element-width: var(--theme-sig-control-colorpicker-picker-input-width, 80px);
                --theme-sig-control-input-background-color: var(--theme-sig-control-colorpicker-picker-input-background-color, rgba(255, 255, 255, 1));
                /*--theme-sig-control-input-value-background-color: var(--theme-sig-control-colorpicker-picker-input-value-background-color, rgba(215, 215, 215, 1));*/
                --theme-sig-control-input-value-active-color: var(--theme-sig-control-colorpicker-picker-input-value-active-color, rgba(40,50,45,1));
                --theme-sig-control-input-value-active-background-color: var(--theme-sig-control-colorpicker-picker-input-value-active-background-color, rgba(174, 200, 26, 1));
                --theme-sig-control-input-color: var(--theme-sig-control-colorpicker-picker-input-color, rgba(40,50, 45, 1));
                --theme-sig-control-input-border-color: var(--theme-sig-control-colorpicker-picker-input-border-color, rgba(40,50,45, 1));
                --theme-sig-control-input-border-width: var(--theme-sig-control-colorpicker-picker-input-border-width, 1px);
                --theme-sig-control-input-border-style: var(--theme-sig-control-colorpicker-picker-input-border-style, solid);
                --theme-sig-control-input-background-color-direction: var(--theme-sig-control-colorpicker-picker-input-background-color-direction, to bottom);
                --theme-sig-control-input-value-active-background-color-stop: var(--theme-sig-control-colorpicker-picker-input-value-active-background-color-stop
                    /* , rgba(174, 200, 26, 1) */
                    );
                --theme-sig-control-input-active-background-color-direction: var(--theme-sig-control-colorpicker-picker-input-active-background-color-direction, to bottom);
                --theme-sig-control-input-border-radius: var(--theme-sig-control-colorpicker-picker-input-border-radius, 3px);
                --theme-sig-control-input-border-color-direction: var(--theme-sig-control-colorpicker-picker-input-border-color-direction, to bottom);
                --theme-sig-control-input-shadow-size: var(--theme-sig-control-colorpicker-picker-input-shadow-size, 0px);
                --theme-sig-control-input-activ-border-color: var(--theme-sig-control-colorpicker-picker-input-activ-border-color
                    /* , inherit */
                    );
                --theme-sig-control-input-activ-border-color-direction: var(--theme-sig-control-colorpicker-picker-input-activ-border-color-direction, to bottom);
                --theme-sig-control-input-pressed-shadow-size: var(--theme-sig-control-colorpicker-picker-input-pressed-shadow-size, 0px);
                --theme-sig-control-input-value-text-align: var(--theme-sig-control-colorpicker-picker-input-value-text-align, center);
                --theme-sig-control-input-margin-leftright: var(--theme-sig-control-colorpicker-picker-input-margin-leftright, 0px);
                --theme-sig-control-input-margin-top: var(--theme-sig-control-colorpicker-picker-input-margin-top, 5px);
                --theme-sig-control-input-unit-text-align: var(--theme-sig-control-colorpicker-picker-input-unit-text-align, center);
                --theme-sig-control-input-unit-margin-leftright: var(--theme-sig-control-colorpicker-picker-input-unit-margin-leftright, 0px);
                --theme-sig-control-input-unit-margin-bottom: var(--theme-sig-control-colorpicker-picker-input-unit-margin-bottom, 5px);
                --theme-sig-control-input-unit-text-size: var(--theme-sig-control-colorpicker-picker-input-unit-text-size, inherit);
                --theme-sig-control-input-unit-color: var(--theme-sig-control-colorpicker-picker-input-unit-color, inherit);
            }

            #hexcontainer sig-control-input {
                --theme-sig-element-width: var(--theme-sig-control-colorpicker-picker-hex-input-width, var(--theme-sig-control-colorpicker-picker-input-width, 80px));
            }

            #colorpickermarker1 {
                position: absolute;
                box-sizing: border-box;
                background-color: blue;
                top: 50%;
                left: 0;
                transform: translate3d(calc(0px - 50%), -50%, 0);
                width: var(--theme-sig-control-colorpicker-bar-marker-width, 20px);
                height: var(--theme-sig-control-colorpicker-bar-marker-height, 20px);
                border: 1px solid black;
                border-radius: var(--theme-sig-control-colorpicker-picker-marker-border-radius, 500px);
            }

            #colorSelectArea {
                left: 50%;
                position: relative;
                transform: translateX(-50%);
            }

            #canvas {
                border-radius: 999px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }

            .hidden {
                display: none;
            }

            sig-control-button {
                margin-right: var(--theme-sig-control-colorpicker-picker-button-spacing, 10px) !important;
                --theme-sig-element-height: var(--theme-sig-control-colorpicker-picker-button-height, 50px);
                --theme-sig-element-width: var(--theme-sig-control-colorpicker-picker-button-width, 100px);
                --theme-sig-control-button-color: var(--theme-sig-control-colorpicker-picker-button-color, rgba(255, 255, 255, 1));
                --theme-sig-control-button-background-color: var(--theme-sig-control-colorpicker-picker-button-background-color, rgba(40, 50, 45, 1));
                --theme-sig-control-button-border-color: var(--theme-sig-control-colorpicker-picker-button-border-color, transparent);
                --theme-sig-control-button-border-width: var(--theme-sig-control-colorpicker-picker-button-border-width, 0px);
                --theme-sig-control-button-border-radius: var(--theme-sig-control-colorpicker-picker-button-border-radius, 3px);
                --theme-sig-control-button-border-style: var(--theme-sig-control-colorpicker-picker-button-border-style, none);
                --theme-sig-control-button-pressed-background-color: var(--theme-sig-control-colorpicker-picker-button-pressed-background-color, rgba(174, 200, 26, 1));
                --theme-sig-control-button-pressed-color: var(--theme-sig-control-colorpicker-picker-button-pressed-color, rgba(255, 255, 255, 1));
                --theme-sig-control-button-background-color-direction: var(--theme-sig-control-colorpicker-picker-button-background-color-direction, to bottom);
                --theme-sig-control-button-border-color-direction: var(--theme-sig-control-colorpicker-picker-button-border-color-direction, to bottom);
                --theme-sig-control-button-shadow-size: var(--theme-sig-control-colorpicker-picker-button-shadow-size, 0px);
                --theme-sig-control-button-text-align: var(--theme-sig-control-colorpicker-picker-button-text-align, center);
                --theme-sig-control-button-vertical-align: var(--theme-sig-control-colorpicker-picker-button-vertical-align, middle);
                --theme-sig-control-button-background-image: var(--theme-sig-control-colorpicker-picker-button-background-image, none);
                --theme-sig-control-button-background-repeat: var(--theme-sig-control-colorpicker-picker-button-background-repeat, no-repeat);
                --theme-sig-control-button-background-position-x: var(--theme-sig-control-colorpicker-picker-button-background-position-x, center);
                --theme-sig-control-button-background-position-y: var(--theme-sig-control-colorpicker-picker-button-background-position-y, center);
                --theme-sig-control-button-background-size: var(--theme-sig-control-colorpicker-picker-button-background-size, cover);
                --theme-sig-control-button-pressed-background-color-direction: var(--theme-sig-control-colorpicker-picker-button-pressed-background-color-direction, to bottom);
                --theme-sig-control-button-pressed-background-image: var(--theme-sig-control-colorpicker-picker-button-pressed-background-image, inherit);
                --theme-sig-control-button-pressed-border-color-direction: var(--theme-sig-control-colorpicker-picker-button-pressed-border-color-direction, to bottom);
                --theme-sig-control-button-pressed-shadow-size: var(--theme-sig-control-colorpicker-picker-button-pressed-shadow-size, 0px);
                --theme-sig-control-led-width: 10px;
                --theme-sig-control-led-height: 10px;
                --theme-sig-control-button-led-border-width: var(--theme-sig-control-colorpicker-picker-button-led-border-width, 1px);
                --theme-sig-control-button-led-border-color: var(--theme-sig-control-colorpicker-picker-button-led-border-color, rgba(0, 0, 0, 0));
                --theme-sig-control-button-led-border-radius: var(--theme-sig-control-colorpicker-picker-button-led-border-radius, 5px);
                --theme-sig-control-button-led-background-color: var(--theme-sig-control-colorpicker-picker-button-led-background-color, #ccc);
                --theme-sig-control-button-led-background-image: var(--theme-sig-control-colorpicker-picker-button-led-background-image, none);
                --theme-sig-control-button-led-pressed-background-color: var(--theme-sig-control-colorpicker-picker-button-led-pressed-background-color, #070);
                --theme-sig-control-button-led-pressed-background-image: var(--theme-sig-control-colorpicker-picker-button-led-pressed-background-image, none);
                --theme-sig-control-button-led-background-size: var(--theme-sig-control-colorpicker-picker-button-led-background-size, cover);
                --theme-sig-control-button-led-background-repeat: var(--theme-sig-control-colorpicker-picker-button-led-background-repeat, no-repeat);
                --theme-sig-control-button-led-margin-height: var(--theme-sig-control-colorpicker-picker-button-led-margin-height, 3px);
                --theme-sig-control-button-led-margin-width: var(--theme-sig-control-colorpicker-picker-button-led-margin-width, 3px);
            }

            sig-control-button:last-child {
                margin-right: 0 !important;
            }

            .table-cell label {
                color: var(--theme-sig-control-colorpicker-picker-label-color, rgba(40, 50, 45, 1));
                margin-right: var(--theme-sig-control-colorpicker-picker-label-margin, 5px);
            }

            .table-cell {
                box-sizing: border-box;
                display: inline-flex;
                width: 33%;
                justify-content: flex-end;
                align-items: center;
            }
            #hexcontainer .table-cell {
                width:100%;
            }

            #canvasContainer {
                position: relative;
                width: 100%;
                top: 50%;
                transform: translateY(-50%);
            }

            #controlButtons {
                white-space: nowrap;
            }

            #colorinputs {
                margin-bottom: var(--theme-sig-control-colorpicler-picker-colorinputs-margin-bottom, 10px);
            }

            #rgbcontainer,
            #hexcontainer, 
            #hslcontainer {
                white-space: nowrap;
                display: flex;
                justify-content: flex-end;
            }
        </style>
        <div class="sig-control-colorpicker-grid clearfix">
            <div id="colorSelectArea"></div>
            <div id="colorinputs">
                <div id="rgbcontainer">
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="rgbred" type="numeric" limit-low="0" limit-high="255"></sig-control-input>
                    </div>
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="rgbgreen" type="numeric" limit-low="0" limit-high="255"></sig-control-input>
                    </div>
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="rgbblue" type="numeric" limit-low="0" limit-high="255"></sig-control-input>
                    </div>
                </div>
                <div id="hslcontainer">
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="hslhue"  type="numeric" limit-low="0" limit-high="360"></sig-control-input>
                    </div>
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="hslsaturation" type="numeric" limit-low="0" limit-high="1"></sig-control-input>
                    </div>
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="hslvalue" type="numeric" limit-low="0" limit-high="1"></sig-control-input>
                    </div>
                </div>
                <div id="hexcontainer">
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="hex" type="hex" limit-low="0" limit-high="255"></sig-control-input>
                    </div>
                </div>
            </div>
            <div id="controlButtons">
                <sig-control-button id="OK"></sig-control-button>
                <sig-control-button id="CANCEL"></sig-control-button>
                <sig-control-button id="SHOWCOLORINPUTS"></sig-control-button>
            </div>
        </div>
    `;
    }

    /****************************************************************************************************
     * define the custom tag name
     *
     * @readonly
     * @static
     ****************************************************************************************************/
    static get is() {
        return "sig-control-colorpicker-grid";
    }

    /****************************************************************************************************
     *called when the element has been created, but before property values are set and local DOM is initalized
     *Creates an instance of LasalRuntimeSigControlProgressBarBasic.
     ****************************************************************************************************/
    constructor() {
        super();
        this.grid = null;
        this.busy = false;
        this.parent = null;
    }

    /****************************************************************************************************
     * Handler for the OK controlbutton
     * Sets the parent value
     * closes the colorpicker
     ****************************************************************************************************/
    _okButtonPointerdownHandler() {
        this.parent.showvalue = this.value;
        this.parent._closeColorpicker();
    }

    /****************************************************************************************************
     * Handles the pointerdown event
     * @param {Event} e - the event
     ****************************************************************************************************/
    pointerDownHandler(e) {
        // Check if the clicked element is a color
        const target = e.composedPath()[0]
        
        if (target.classList.contains('color')) {
            
            target.parentElement.querySelectorAll('.active').forEach((node) => {
                node.classList.remove('active');
            })
            target.classList.add('active');
            // If it is a color, set the value of the specified input to that color
            if (this.targetinput) {
                
                let rgbString = target.style.backgroundColor;
                let rgbArray = this._rgbArrayFromCSSValue(rgbString);
                this._updateInputs(rgbArray);

                this.targetinput.value = target.style.backgroundColor;

            }
        }
    }

    /****************************************************************************************************
     * Fills the Grid with colors
     ****************************************************************************************************/
    _buildColorSelectArea() {
        const areaContainer = this.$.colorSelectArea;
        //Set the dimensions for the colorSelectArea
        areaContainer.style.height = this._calculateHeightForColorSelectArea() + 'px';
        areaContainer.style.width = this.options.trackwidth + 'px';
        areaContainer.style.paddingTop = `${this.options.areapaddingtop}px`;
        areaContainer.style.paddingBottom = `${this.options.areapaddingbottom}px`;

        this.colors = this.options.colors;
        //Since the APIs dont work in the design mode,
        //the colors are set to black/white to be able to preview the dropdown
        if (this.isdesignmode) {
            this.colors = ['rgba(0,0,0,1)', 'rgba(255,255,255,1)'];
        }
        //A div for each color
        for (let color of this.colors) {
            const colorDiv = document.createElement('div');
            colorDiv.classList.add('color');
            colorDiv.style.backgroundColor = color;
            //Add each color to the colorSelectArea
            areaContainer.appendChild(colorDiv);
        }

        //The eventListener for a pointer down event
        //(=> color select)
        this.sigAddEventListener('tap', (e) => {
            this.pointerDownHandler(e);
        }, 'polymerEvent', areaContainer);


        return areaContainer;


    }

    /****************************************************************************************************
     * Sig element function
     ****************************************************************************************************/
    connectedCallback() {
        super.connectedCallback();
        if (!this.isdesignmode) {
            this.sigAddEventListener('tap', (e) => {
                this.pointerDownHandler(e);
            }, 'polymerEvent', this.$.colorSelectArea);
        }
    }

    /****************************************************************************************************
     * Sets the color of the control
     *
     * @param {*} e
     ****************************************************************************************************/
    _setColor(e) {

        // Check if the clicked element is a color
        const target = e.path[0]
        if (target.classList.contains('color')) {
            // If it is a color, set the value of the specified input to that color
            if (this.targetinput) {
                let rgbString = target.style.backgroundColor;
                let rgbArray = this._rgbArrayFromCSSValue(rgbString);
                this._updateInputs(rgbArray);

                this.targetinput.value = target.style.backgroundColor;

            }
        }
    }

    /****************************************************************************************************
     * Sets the Inputs to the parents value
     * Moves the Marker if the color can be found on the canvas
     * @param {*} value
     ****************************************************************************************************/
    _initializeOnOpen(value) {
        if (value) {
            let workVal = value;
            if (workVal.length < 4) {
                workVal.push(255);
            }
        }
    }

}
customElements.define(LasalRuntimeSigControlColorpickerGrid.is, LasalRuntimeSigControlColorpickerGrid);