import { h } from "@stencil/core";
import { getInputCreator } from '../bce-input-creator/input-creator';
import { colorShade } from '../../utils/color';
export class Color {
    constructor() {
        // #region Forwarded to native inputs
        this.disabled = false;
        // #endregion
        this._initialValue = this.value;
        this._inputCreator = getInputCreator(this, err => (this.error = !!err));
        this.handleBlur = () => {
            this.hasFocus = false;
            this._inputCreator.validate();
        };
        this.handleFocus = () => {
            this.hasFocus = true;
        };
        this.handleReset = () => {
            if (!this.default || this.color === this.default)
                return;
            const [c1, c2] = this.default.split(' ');
            this.updateValue(c1, c2);
        };
        this.handleInput = (e) => {
            e.stopPropagation();
            const colors = this.el.shadowRoot.querySelectorAll('input');
            const [c1, c2] = Array.from(colors).map(i => i.value);
            this.updateValue(c1, c2);
        };
    }
    watchValue(value) {
        const [c1, c2] = value ? value.split(' ') : [];
        const shades = value && colorShade(c1, c2);
        if (!shades)
            return;
        for (const key of Object.keys(shades)) {
            const shade = shades[key];
            this.el.style.setProperty(`--bce-${key}`, shade);
        }
    }
    async reset() {
        this.value = this.default || this._initialValue;
        this._inputCreator.reset();
    }
    async validate(silent = false) {
        return this._inputCreator.validate(silent);
    }
    updateValue(c1, c2) {
        this.value = `${c1} ${c2}`;
        this._inputCreator.handleInput();
        const shades = colorShade(c1, c2);
        const event = new CustomEvent('input', { bubbles: true, detail: shades });
        this.el.dispatchEvent(event);
    }
    componentDidLoad() {
        this.watchValue(this.value);
    }
    render() {
        const InputCreator = this._inputCreator;
        const [v1, v2] = this.value ? this.value.split(' ') : [];
        return (h(InputCreator, null,
            h("div", { class: "container" },
                h("input", { disabled: this.disabled, type: "color", value: v1, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, "aria-label": this.label + ' 1' }),
                h("input", { disabled: this.disabled, type: "color", value: v2, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, "aria-label": this.label + ' 2' }),
                h("div", { class: "preview" }, [...Array(9)].map(() => (h("div", null))))),
            this.default && (h("bce-button", { design: "text", onClick: this.handleReset }, "Reset"))));
    }
    static get is() { return "bce-color"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-color.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-color.css"]
    }; }
    static get properties() { return {
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "reflect": true
        },
        "compact": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "compact",
            "reflect": true
        },
        "default": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "default",
            "reflect": true
        },
        "error": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "error",
            "reflect": true
        },
        "hasFocus": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "focus",
            "reflect": true
        },
        "info": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "info",
            "reflect": true
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": true
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": true
        },
        "tooltip": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "tooltip",
            "reflect": false
        },
        "validation": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "validation",
            "reflect": true
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": true,
            "defaultValue": "false"
        },
        "value": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        }
    }; }
    static get methods() { return {
        "reset": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "validate": {
            "complexType": {
                "signature": "(silent?: boolean) => Promise<ValidatorError[]>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "ValidatorError": {
                        "location": "import",
                        "path": "../../utils/validator"
                    }
                },
                "return": "Promise<ValidatorError[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "value",
            "methodName": "watchValue"
        }]; }
}
