import { MicroEditorBase } from "../../../Views/Editor/MicroEditorBase.js";
import { ColorEditorPopUp } from "../../../Views.Editors/micro/ColorEditor/ColorEditorPopUp.js";
export class ColorEditor extends MicroEditorBase {
    get buttonNode() {
        return this.node.children("button");
    }
    get inputNode() {
        return this.node.children("input");
    }
    get swatchNode() {
        return this.node.children("[role=swatch]");
    }
    get popup() {
        return this.m_popup;
    }
    get value() {
        return this.source.getFeaturePrimaryValue();
    }
    set value(value) {
        this.source.setFeaturePrimaryValue(value);
    }
    get inputValue() {
        return this.inputNode.val();
    }
    template() {
        return `<div class="-fb-color-editor">
                    <div role="swatch">
                        <div></div>
                        <div></div>
                    </div>
                    <input type="text" maxlength="7" />
                    <button><img src="${Jade.IconSet.get("pdjs").resolve("navigate_down_black.png", Jade.IconSetSizeSpecificDirectory.x16)}"/></button>
                </div>`;
    }
    focus() {
        this.inputNode.focus().select();
    }
    onActivate(e) {
        super.onActivate(e);
        this.inputNode.on(Jade.BrowserEvent.DOUBLECLICK, () => {
            Tipped.show(this.buttonNode);
        });
        this.popup_init();
        this.inputNode.on(Jade.BrowserEvent.KEYUP, (e) => {
            this.onColorChange({
                color: this.inputNode.val()
            });
        });
    }
    popup_init() {
        this.m_popup = new ColorEditorPopUp({
            handle: this.buttonNode,
            editor: this,
            change: (e) => {
                this.onColorChange(e, true);
            }
        });
        this.controls.add(this.m_popup);
    }
    onColorChange(e, updateText) {
        let isValid = isValidColor(e.color);
        this.swatchNode.removeClass("-fb-swatch-error");
        if (!isValid && !Jade.String.isNullOrWhiteSpace(e.color)) {
            this.swatchNode.addClass("-fb-swatch-error");
            this.swatchNode.css({
                backgroundColor: "#FFFFFF"
            });
        }
        else {
            this.swatchNode.css({
                backgroundColor: e.color
            });
            this.value = e.color;
        }
        if (updateText === true) {
            this.inputNode.val(e.color);
        }
    }
}
export function isValidColor(value) {
    return /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/g.test(value || "");
}
