import { h } from "@stencil/core";
import { MDCSelect } from '@material/select';
import { MDCSwitch } from '@material/switch';
import { patchMDCSwitchFocus } from '../../utils/utils';
export class PiePreviewControl {
    constructor() {
        this.env = {
            mode: 'gather',
            role: 'student'
        };
    }
    componentDidLoad() {
        this.roleSelect = new MDCSelect(this.roleSelectElement);
        this.checkAnswers = new MDCSwitch(this.checkAnswersElement);
        patchMDCSwitchFocus(this.checkAnswersElement);
        this.checkAnswers.listen('change', () => {
            this.checkAnswers.checked ? this.env.mode = 'evaluate' : this.env.mode = 'gather';
            this.envChanged.emit(this.env);
        });
        this.roleSelect.listen('MDCSelect:change', () => {
            // sticky mdc focus workaround https://github.com/prateekbh/preact-material-components/issues/625
            this.roleSelect.root_.classList.remove(`mdc-select--focused`);
            this.env.role = this.roleSelect.value;
            this.envChanged.emit(this.env);
        });
    }
    render() {
        return (h("div", { class: "preview-control-container" },
            h("div", { ref: (el) => this.roleSelectElement = el, class: "mdc-select demo-width-class pie-role-select" },
                h("i", { class: "mdc-select__dropdown-icon" }),
                h("div", { class: "mdc-select__selected-text" }, "Student"),
                h("div", { class: "mdc-select__menu mdc-menu mdc-menu-surface demo-width-class" },
                    h("ul", { class: "mdc-list" },
                        h("li", { class: "mdc-list-item  mdc-list-item--selected", "aria-selected": "true", "data-value": "student" }, "Student"),
                        h("li", { class: "mdc-list-item", "data-value": "instructor" }, "Instructor"))),
                h("span", { class: "mdc-floating-label mdc-floating-label--float-above" }, "Role"),
                h("div", { class: "mdc-line-ripple" })),
            h("div", { class: "pie-check-answers" },
                h("div", { ref: (el) => this.checkAnswersElement = el, class: "mdc-switch" },
                    h("div", { class: "mdc-switch__track" }),
                    h("div", { class: "mdc-switch__thumb-underlay" },
                        h("div", { class: "mdc-switch__thumb" },
                            h("input", { type: "checkbox", id: "basic-switch", class: "mdc-switch__native-control", role: "switch" })))),
                h("label", { htmlFor: "basic-switch" }, "Check Answers"))));
    }
    static get is() { return "pie-preview-control"; }
    static get originalStyleUrls() { return {
        "$": ["pie-preview-control.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["pie-preview-control.css"]
    }; }
    static get events() { return [{
            "method": "envChanged",
            "name": "envChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
