import { h } from "@stencil/core";
import { Icon } from '../bce-icon/bce-icon';
import { ripple } from '../../utils/ripple';
export class Fab {
    constructor() {
        this.icon = Icon.DEFAULT_ICON.iconName;
        this.info = '';
        this.buttons = [];
        this.handleClick = () => {
            if (this.buttons.length)
                this.active = !this.active;
        };
        this.handleMouseDown = (event) => {
            if (this.disabled)
                return;
            ripple(event.target, event);
        };
        this.handleSlotChange = () => {
            const children = Array.from(this.el.childNodes);
            this.buttons = children.filter(n => n.nodeName === 'BCE-BUTTON');
            for (const button of this.buttons)
                this.initButton(button);
        };
        this.disableClick = (event) => {
            if (this.disabled)
                event.stopPropagation();
        };
    }
    watch() {
        for (const button of this.buttons)
            this.propagateState(button);
    }
    componentDidLoad() {
        const slot = this.el.shadowRoot.querySelector('slot');
        if (slot) {
            slot.addEventListener('slotchange', this.handleSlotChange);
            this.handleSlotChange();
        }
    }
    initButton(button) {
        this.propagateState(button);
        // Always use default design for internal buttons
        button.design = undefined;
        // Ensure that there is always an icon
        button.icon = button.icon || Icon.DEFAULT_ICON.iconName;
        // Deactivate the FAB overlay whenever one of the options is pressed. Call
        // the original onclick handler afterwards.
        const { onclick } = button;
        button.onclick = event => {
            this.active = false;
            if (onclick)
                onclick.apply(button, [event]);
        };
    }
    propagateState(button) {
        if (!this.active)
            button.dataset.inactive = '';
        else
            delete button.dataset.inactive;
        if (this.inline)
            button.dataset.inline = '';
        else
            delete button.dataset.inline;
    }
    render() {
        return [
            !this.inline && h("slot", null),
            this.info && (h("div", { "data-info": true },
                h("bce-button", { design: this.active ? 'text' : 'contained', color: this.color, disabled: this.disabled, onClick: this.handleClick, onMouseDown: this.handleMouseDown, small: true }, this.info))),
            h("button", { disabled: this.disabled, onClick: this.handleClick, onMouseDown: this.handleMouseDown },
                h("bce-icon", { raw: this.icon, size: "lg", onClick: this.disableClick, "fixed-width": true })),
            this.inline && (h("div", { class: "container" },
                h("slot", null))),
            h("div", { class: "backdrop", onClick: this.handleClick })
        ];
    }
    static get is() { return "bce-fab"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-fab.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-fab.css"]
    }; }
    static get properties() { return {
        "active": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "active",
            "reflect": true
        },
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "reflect": true
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": true
        },
        "icon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon",
            "reflect": true,
            "defaultValue": "Icon.DEFAULT_ICON.iconName"
        },
        "info": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "info",
            "reflect": true,
            "defaultValue": "''"
        },
        "inline": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "inline",
            "reflect": true
        }
    }; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "active",
            "methodName": "watch"
        }, {
            "propName": "inline",
            "methodName": "watch"
        }]; }
}
