import './bce-element-icons';
import { h } from "@stencil/core";
import { Block } from '../../models/block';
import { NativeEvent } from '../../utils/native-event';
export class BceElement {
    constructor() {
        this.editor = false;
        this.hasFocus = false;
        this.name = this.type.charAt(0).toUpperCase() + this.type.slice(1);
        this.elementIcon = Block.ICON_MAP[this.type];
        this.labels = {};
        this.handleFocus = (event) => {
            event.cancelBubble = true;
            this.hasFocus = true;
            this.el.dispatchEvent(new FocusEvent(event.type, event));
        };
        this.handleInput = (event) => {
            event.cancelBubble = true;
            this.value = event.target.value;
            this.el.dispatchEvent(new NativeEvent('input'));
        };
        this.handleTemplate = (event) => {
            event.cancelBubble = true;
            this.template = event.target.value;
            this.onTemplate.emit(this.template);
        };
        this.handleBlur = (event) => {
            event.cancelBubble = true;
            this.hasFocus = false;
            this.el.dispatchEvent(new FocusEvent(event.type, event));
        };
        this.handleDelete = () => {
            this.onDelete.emit();
        };
        this.handleDuplicate = () => {
            this.onDuplicate.emit();
        };
    }
    componentWillLoad() {
        this.parseValue(this.template);
    }
    parseValue(value) {
        this.template = typeof value === 'string' ? JSON.parse(value) : value;
    }
    renderElement() {
        const BceElement = `bce-element-${this.type}`;
        return (h(BceElement, { value: this.value, template: this.template, resolveLocation: this.resolveLocation, onInput: this.handleInput }));
    }
    renderTemplate() {
        const BceElementTemplate = `bce-element-${this.type}-template`;
        const actionLabels = this.labels.actions || {};
        const elementLabels = this.labels.elements || {};
        const actionDelete = {
            icon: 'fas:trash',
            label: actionLabels.labelDelete || 'Delete',
            onClick: this.handleDelete
        };
        const actionDuplicate = {
            icon: 'fas:clone',
            label: actionLabels.labelDuplicate || 'Duplicate',
            onClick: this.handleDuplicate
        };
        return [
            h("div", null,
                h("bce-icon", { raw: this.elementIcon }),
                h("label", null, this.name),
                h("bce-dropdown-menu", null,
                    h("bce-button", Object.assign({}, actionDelete), actionDelete.label),
                    h("bce-button", Object.assign({}, actionDuplicate), actionDuplicate.label))),
            h(BceElementTemplate, Object.assign({}, this.template, elementLabels[this.type], { onInput: this.handleTemplate, onFocus: this.handleFocus, onBlur: this.handleBlur }))
        ];
    }
    render() {
        return this.editor ? this.renderTemplate() : this.renderElement();
    }
    static get is() { return "bce-element"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element.css"]
    }; }
    static get properties() { return {
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "Block.Type",
                "resolved": "Type.Audio | Type.Checkbox | Type.Download | Type.Header | Type.Image | Type.ImageMap | Type.Input | Type.Link | Type.Matrix | Type.Radio | Type.Slider | Type.Sort | Type.Table | Type.Text | Type.Video",
                "references": {
                    "Block": {
                        "location": "import",
                        "path": "../../models/block"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": true
        },
        "value": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        },
        "template": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "Block.Element | string",
                "resolved": "ElementAudio | ElementCheckbox | ElementDownload | ElementHeader | ElementImage | ElementImageMap | ElementInput | ElementLink | ElementMatrix | ElementRadio | ElementSlider | ElementSort | ElementTable | ElementText | ElementVideo | string",
                "references": {
                    "Block": {
                        "location": "import",
                        "path": "../../models/block"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "template",
            "reflect": true
        },
        "editor": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "editor",
            "reflect": true,
            "defaultValue": "false"
        },
        "hasFocus": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "focus",
            "reflect": true,
            "defaultValue": "false"
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": false,
            "defaultValue": "this.type.charAt(0).toUpperCase() + this.type.slice(1)"
        },
        "elementIcon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "element-icon",
            "reflect": false,
            "defaultValue": "Block.ICON_MAP[this.type]"
        },
        "readonly": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "readonly",
            "reflect": true
        },
        "labels": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ElementLabels",
                "resolved": "ElementLabels",
                "references": {
                    "ElementLabels": {
                        "location": "import",
                        "path": "../../models/labels"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "{}"
        },
        "resolveLocation": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ResolveLocation",
                "resolved": "((location: string) => Promise<string>) | undefined",
                "references": {
                    "ResolveLocation": {
                        "location": "import",
                        "path": "../../models/resolve-location"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get events() { return [{
            "method": "onTemplate",
            "name": "template",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "Block.Element",
                "resolved": "ElementAudio | ElementCheckbox | ElementDownload | ElementHeader | ElementImage | ElementImageMap | ElementInput | ElementLink | ElementMatrix | ElementRadio | ElementSlider | ElementSort | ElementTable | ElementText | ElementVideo",
                "references": {
                    "Block": {
                        "location": "import",
                        "path": "../../models/block"
                    }
                }
            }
        }, {
            "method": "onDelete",
            "name": "delete",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "onDuplicate",
            "name": "duplicate",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "template",
            "methodName": "parseValue"
        }]; }
}
