import { h } from '@stencil/core';
/**
 * thanks to  https://github.com/andregoncalves/stencil-timepicker/
 */
export class Timepicker {
    constructor() {
        this.step = 15;
        this.clock24 = true;
    }
    _getOptions() {
        const start = 0;
        const total = Math.round((60 / this.step) * 24);
        const hours = [];
        for (let i = start; i < total; i++) {
            hours.push(i * this.step);
        }
        return hours;
    }
    _format(h, m) {
        let indicator = '';
        if (!this.clock24 && h >= 12) {
            indicator = 'PM';
            h = h - 12;
        }
        else {
            if (!this.clock24 && h < 12) {
                indicator = 'AM';
            }
        }
        if (!this.clock24 && h === 0) {
            h = 12;
        }
        if (h < 10) {
            h = `0${h}`;
        }
        if (m < 10) {
            m = `0${m}`;
        }
        if (indicator)
            m = m + ` ${indicator}`;
        return `${h}:${m}`;
    }
    _renderOption(m) {
        const base = new Date(0);
        base.setMinutes(m);
        const hours = base.getUTCHours();
        const minutes = base.getUTCMinutes();
        const formatted = this._format(hours, minutes);
        if (this.timeSelected === formatted)
            return h("materials-list-item", { selected: true, onClick: () => this.timeSelectedChange.emit(formatted) }, formatted);
        else
            return h("materials-list-item", { onClick: () => this.timeSelectedChange.emit(formatted) }, formatted);
    }
    render() {
        return this._getOptions().map(e => this._renderOption(e));
    }
    static get is() { return "materials-timepicker"; }
    static get encapsulation() { return "shadow"; }
    static get properties() { return {
        "timeSelected": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "time-selected",
            "reflect": false
        },
        "step": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "step",
            "reflect": false,
            "defaultValue": "15"
        },
        "clock24": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "clock-2-4",
            "reflect": false,
            "defaultValue": "true"
        }
    }; }
    static get events() { return [{
            "method": "timeSelectedChange",
            "name": "timeSelectedChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            }
        }]; }
}
