import { MDCRipple, util } from '@material/ripple';
import { h } from '@stencil/core';
export class Step {
    constructor() {
        this.status = 'empty';
        this.active = false;
    }
    componentDidLoad() {
        if (util.supportsCssVariables(window)) {
            MDCRipple.attachTo(this.header);
        }
        const slot = this.host.shadowRoot.querySelector('slot');
        slot.addEventListener('slotchange', () => {
            this.adjustHeight();
        });
        this.adjustHeight();
    }
    getStepClasses() {
        return {
            'step': true,
            'mdc-typography': true,
            'step-editable': this.editable,
            'step-active': this.active,
            'step-valid': this.status === 'valid',
            'step-empty': this.status === 'empty',
            'step-invalid': this.status === 'invalid',
            'step-last': this.isLast,
        };
    }
    getStepIconContent() {
        if (this.status === 'valid') {
            return h("materials-icon", { name: "done", color: "#fff" });
        }
        else {
            return (this.index + 1).toString();
        }
    }
    getStepIconClasses() {
        return {
            'step-icon': true,
            'step-icon-valid': this.status === 'valid',
            'step-icon-invalid': this.status === 'invalid',
        };
    }
    getStepBodyClasses() {
        return {
            'step-body': true,
            'no-padding': this.noPadding,
            'step-body-active': this.active,
        };
    }
    handleClickNext() {
        if (this.status === 'valid') {
            this.submitStep.emit();
        }
    }
    handleClickFinish() {
        if (this.status === 'valid') {
            this.submitStepper.emit();
        }
    }
    handleClickPrevious() {
        this.previousStep.emit();
    }
    async adjustHeight() {
        if (this.body) {
            this.body.style.maxHeight = this.active ? this.body.scrollHeight + 'px' : '0px';
        }
    }
    handleLast() {
        if (this.isLast) {
            this.host.classList.add('step-last');
        }
        else {
            this.host.classList.remove('step-last');
        }
    }
    render() {
        return (h("div", { class: this.getStepClasses() },
            h("div", { ref: el => this.header = el, class: "step-header mdc-ripple-surface", onClick: () => this.stepClick.emit(this.index) },
                h("div", { class: this.getStepIconClasses() }, this.getStepIconContent()),
                h("div", { class: "step-title" },
                    this.stepTitle,
                    this.summary && h("span", { class: "step-summary" },
                        h("br", null),
                        this.summary),
                    !this.summary && this.optional && h("span", { class: "step-optional" },
                        h("br", null),
                        "Optionnel"))),
            h("div", { ref: el => this.body = el, class: this.getStepBodyClasses() },
                h("div", { class: "step-content" },
                    h("slot", null)),
                this.showButtons && h("div", { class: "step-buttons" },
                    this.index > 0 && h("materials-button", { class: "previous-button", onClick: () => this.handleClickPrevious(), color: "#444" }, "Pr\u00E9c\u00E9dent"),
                    this.isLast ?
                        h("materials-button", { disabled: this.status !== 'valid' && !this.optional, raised: true, onClick: () => this.handleClickFinish() }, this.confirmationText ? this.confirmationText : 'Valider')
                        : h("materials-button", { disabled: this.status !== 'valid' && !this.optional, raised: true, onClick: () => this.handleClickNext() }, "Suivant")),
                this.confirmationText && !this.showButtons && this.isLast &&
                    h("materials-button", { disabled: this.status !== 'valid' && !this.optional, raised: true, onClick: () => this.handleClickFinish() }, this.confirmationText))));
    }
    static get is() { return "materials-step"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["step.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["step.css"]
    }; }
    static get properties() { return {
        "status": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'valid' | 'invalid' | 'empty'",
                "resolved": "\"empty\" | \"invalid\" | \"valid\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "status",
            "reflect": false,
            "defaultValue": "'empty'"
        },
        "stepTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "step-title",
            "reflect": false
        },
        "index": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "index",
            "reflect": false
        },
        "isLast": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "is-last",
            "reflect": false
        },
        "active": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "active",
            "reflect": false,
            "defaultValue": "false"
        },
        "optional": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "optional",
            "reflect": false
        },
        "editable": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "editable",
            "reflect": false
        },
        "showButtons": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "show-buttons",
            "reflect": false
        },
        "confirmationText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "confirmation-text",
            "reflect": false
        },
        "summary": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "summary",
            "reflect": false
        },
        "noPadding": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "no-padding",
            "reflect": false
        }
    }; }
    static get events() { return [{
            "method": "stepClick",
            "name": "stepClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "previousStep",
            "name": "previousStep",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "submitStep",
            "name": "submitStep",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "submitStepper",
            "name": "submitStepper",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "adjustHeight": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "host"; }
    static get watchers() { return [{
            "propName": "active",
            "methodName": "adjustHeight"
        }, {
            "propName": "isLast",
            "methodName": "handleLast"
        }]; }
}
