import { MDCIconButtonToggle } from '@material/icon-button';
import { MDCRipple } from '@material/ripple';
import { h } from '@stencil/core';
// https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-button
// TODO: gerer les couleurs
/**
 * S'utilise avec une icon, img, svg.
 *
 * ## Exemple Utilisation:
 *    <materials-icon-button icon="settings">
 *    <materials-icon-button img="/url/settings">
 *    <materials-icon-button img="data:image/svg+xml;base64,[data]">
 *    <materials-icon-button svg>
 *      <svg slot="svg"></svg>
 *    </materials-icon-button>
 *
 * ### Toggle
 *
 *    <materials-icon-button icon="settings" icon-off="settings_border">
 *
 *    <materials-icon-button img="/url/settings.jpg" img-off="/url/settings_border.jpg">
 *
 *    <materials-icon-button svg>
 *       <svg slot="svg"></svg>
 *       <svg slot="svg-off"></svg>
 *    </materials-icon-button>
 *
 * @deprecated N'utilisez plus la prop "iconOn" mais "icon" à la place
 */
export class IconButton {
    constructor() {
        this.dense = false;
        this.iconToggle = () => ([
            h("i", { class: "material-icons mdc-icon-button__icon mdc-icon-button__icon--on" }, this.iconOn || this.icon),
            h("i", { class: "material-icons mdc-icon-button__icon" }, this.iconOff)
        ]);
        this.svgToggle = () => ([
            h("slot", { name: "svg-off" }),
            h("slot", { name: "svg" })
        ]);
        this.imgToggle = () => ([
            h("img", { src: this.imgOff, class: "mdc-icon-button__icon" }),
            h("img", { src: this.img, class: "mdc-icon-button__icon mdc-icon-button__icon--on" })
        ]);
    }
    componentDidLoad() {
        if (this.large) {
            this.iconButtonEl.style.setProperty('--mdc-ripple-fg-size', '43.2px !important');
            this.iconButtonEl.style.setProperty('--mdc-ripple-fg-scale', '1.66667');
            this.iconButtonEl.style.setProperty('--mdc-ripple-fg-scale', '14px');
            this.iconButtonEl.style.setProperty('--mdc-ripple-top', '14px');
        }
        if ((this.icon || this.iconOn) && this.iconOff || this.img && this.imgOff || this.svg && this.svgOff) {
            MDCIconButtonToggle.attachTo(this.iconButtonToggleEl);
        }
        else if (this.icon || this.img || this.svg) {
            const iconButtonRipple = MDCRipple.attachTo(this.iconButtonEl);
            iconButtonRipple.unbounded = true;
        }
        this.initSvg();
    }
    /**
     * Set la width et height à 24;
     * Et ajoute les classes MDC aux elements svg inséré dans les slot svg & svg-off.
     */
    initSvg() {
        if (this.svg || this.svg && this.svgOff) {
            const svgOnEl = document.querySelector('svg[slot="svg"]');
            const svgOffEl = document.querySelector('svg[slot="svg-off"]');
            svgOnEl.classList.add('mdc-icon-button__icon', 'mdc-icon-button__icon--on');
            svgOnEl.setAttribute('width', '24');
            svgOnEl.setAttribute('height', '24');
            if (svgOffEl) {
                svgOffEl.classList.add('mdc-icon-button__icon');
                svgOffEl.setAttribute('width', '24');
                svgOffEl.setAttribute('height', '24');
            }
        }
    }
    renderIconButtonToggle() {
        return (h("button", { class: this.setClassIconButtonToggle(), "aria-label": this.label, "aria-hidden": this.pressed, "aria-pressed": this.pressed, disabled: this.disabled, ref: el => this.iconButtonToggleEl = el },
            (this.iconOn || this.icon) && this.iconOff && this.iconToggle(),
            this.svg && (document.querySelector('svg[slot="svg-off"]')) && this.svgToggle(),
            this.img && this.imgOff && this.imgToggle()));
    }
    renderIconButton() {
        return (h("button", { class: { 'mdc-icon-button': true, 'materials-dense': this.dense }, ref: el => this.iconButtonEl = el, disabled: this.disabled },
            this.icon && h("i", { class: this.getIconClasses() }, this.icon),
            this.img && h("img", { src: this.img, class: "mdc-icon-button__icon " }),
            this.svg && h("slot", { name: "svg" })));
    }
    getIconClasses() {
        const classes = {
            'mdc-icon-button__icon': true,
            'material-icons': true,
        };
        return classes;
    }
    setClassIconButtonToggle() {
        return {
            'mdc-icon-button': true,
            'mdc-icon-button--on': !this.icon // n'est pas utilisé si on utilise les icones v0.44.0
        };
    }
    render() {
        return (this.iconOn || this.icon && this.iconOff
            ||
                this.img && this.imgOff
            ||
                this.svg && this.svgOff) ? this.renderIconButtonToggle() : this.renderIconButton();
    }
    static get is() { return "materials-icon-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["icon-button.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["icon-button.css"]
    }; }
    static get properties() { return {
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": false
        },
        "pressed": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "pressed",
            "reflect": false
        },
        "icon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon",
            "reflect": false
        },
        "iconOn": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon-on",
            "reflect": false
        },
        "iconOff": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon-off",
            "reflect": false
        },
        "svg": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "svg",
            "reflect": false
        },
        "svgOff": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "svg-off",
            "reflect": false
        },
        "img": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "img",
            "reflect": false
        },
        "imgOff": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "img-off",
            "reflect": false
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        },
        "labelOn": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-on",
            "reflect": false
        },
        "labelOff": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-off",
            "reflect": false
        },
        "large": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "large",
            "reflect": false
        },
        "dense": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "dense",
            "reflect": false,
            "defaultValue": "false"
        }
    }; }
    static get elementRef() { return "host"; }
}
