import { isValidColor } from "./ColorEditor.js";
export class ColorEditorPopUp extends Jade.UI.Control {
    constructor(options) {
        super(options);
        this.m_handle = options.handle;
        this.m_editor = options.editor;
    }
    get editor() {
        return this.m_editor;
    }
    get handle() {
        return this.m_handle;
    }
    get colorPickerNode() {
        return this.node.find("[role=picker]");
    }
    get colorPicker() {
        return this.colorPickerNode
            .data("kendoFlatColorPicker");
    }
    get changeCallback() {
        return this.state.get("change", () => { });
    }
    get rInput() {
        return this.node.find("input[role=R]");
    }
    get gInput() {
        return this.node.find("input[role=G]");
    }
    get bInput() {
        return this.node.find("input[role=B]");
    }
    get hexInput() {
        return this.node.find("input[role=hex]");
    }
    get editorValue() {
        return isValidColor(this.editor.value) ?
            this.editor.value : "#FFFFFF";
    }
    template() {
        return `
        <div class="-fb-color-editor-popup" style="display:none;">
            <div role="picker"></div>
            <div role="inputs">
                R: <input type="text" role="R" />
                G: <input type="text" role="G" />
                B: <input type="text" role="B" />
                Hex: <input type="text" role="hex" />
            </div>
        </div>`;
    }
    onActivate(e) {
        super.onActivate(e);
        this.rInput.on(Jade.BrowserEvent.KEYUP, (e) => {
            this.rInput_onChange(e);
        });
        this.gInput.on(Jade.BrowserEvent.KEYUP, (e) => {
            this.gInput_onChange(e);
        });
        this.bInput.on(Jade.BrowserEvent.KEYUP, (e) => {
            this.bInput_onChange(e);
        });
        this.hexInput.on(Jade.BrowserEvent.KEYUP, (e) => {
            this.hexInput_onChange(e);
        });
        this.popup_init();
    }
    rInput_onChange(e) {
        this.updateHex();
    }
    gInput_onChange(e) {
        this.updateHex();
    }
    bInput_onChange(e) {
        this.updateHex();
    }
    hexInput_onChange(e) {
    }
    popup_init() {
        Tipped.create(this.handle, this.node.get(0), {
            skin: "white",
            showOn: "click",
            hideOn: "click-outside",
            hideAfter: 500,
            hideDelay: 0,
            position: {
                target: "bottomright",
                tooltip: "topright"
            },
            offset: {
                y: 6,
                x: 7
            },
            stem: false,
            maxWidth: 300,
            onShow: () => {
                this.popup_onShow();
            }
        });
    }
    popup_onShow() {
        this.colorpicker_init();
        this.colorPicker.value(this.editorValue);
        this.updateColorInputs(this.editorValue);
        this.hexInput.select();
        this.hexInput.focus();
    }
    colorpicker_init() {
        if (this.colorPicker == null) {
            this.colorPickerNode.kendoFlatColorPicker({
                preview: false,
                value: this.editor.value,
                change: (e) => {
                    this.colorpicker_onChange(e);
                }
            }).data("kendoFlatColorPicker");
        }
    }
    colorpicker_onChange(e) {
        let value = (e.value || "#FFFFFF").toUpperCase();
        this.changeCallback({
            color: value
        });
        this.updateColorInputs(value);
    }
    updateColorInputs(value) {
        var color = kendo.parseColor(value, true);
        this.rInput.val(color.r);
        this.gInput.val(color.g);
        this.bInput.val(color.b);
        this.hexInput.val(value);
    }
    updateHex() {
        let r = parseInt(this.rInput.val());
        let g = parseInt(this.gInput.val());
        let b = parseInt(this.bInput.val());
        let allValid = !Number.isNaN(r) &&
            !Number.isNaN(g) &&
            !Number.isNaN(b);
        let hex = this.colorPicker.value();
        if (allValid) {
            hex = `#${r.toString(16).padStart(2, "0")}${g.toString(16)}${b.toString(16)}`;
        }
        this.colorPicker.value(hex);
        hex = this.colorPicker.value();
        this.hexInput.val(hex);
        this.changeCallback({
            color: hex
        });
    }
    updateRGB() {
    }
}
