import { h } from "@stencil/core";
import { MeridiemTimeDisplay, MilitaryTimeDisplay } from '../time-picker.service';
export class TimePickerClock {
    constructor() {
        this.meridiemOptions = [
            { label: '-', value: '' },
            { label: 'AM', value: 'AM' },
            { label: 'PM', value: 'PM' }
        ];
        this.parsedTime = { hour: '', minutes: '', control: '' };
        this.context = 'horizontal';
        /**
         * Bool to display time in meridiem or military
         */
        this.meridiem = true;
    }
    injectedPropWatcher() {
        this.assignStrategy();
    }
    valueHandler(newValue) {
        this.parseTime(newValue);
    }
    // Prevent the events from bubbling up to the parent form group
    onFormElementLoaded(event) {
        event.stopPropagation();
    }
    componentWillLoad() {
        this.assignStrategy();
        this.parseTime(this.value);
    }
    /**
     * Blur from our child inputs will propogate value
     */
    onAnjBlur() {
        this.anjTimeChanged.emit({ parsedValue: this.parsedTime });
    }
    /**
     * Listens for hour update.
     */
    onAnjHourChange(event) {
        this.parsedTime.hour = event.detail;
    }
    /**
     * Listens for hour autotab instruction.
     */
    onAnjHourTab() {
        this.minInput.focusNativeInput();
    }
    /**
     * Listens for hour update.
     */
    onAnjMinuteChange(event) {
        this.parsedTime.minutes = event.detail;
    }
    async focusHour() {
        this.hourInput.focusNativeInput();
    }
    assignStrategy() {
        this.strategy = (this.meridiem) ? new MeridiemTimeDisplay(this.locale, this.language) : new MilitaryTimeDisplay(this.locale, this.language);
    }
    controlSelected(event) {
        this.parsedTime.control = event.detail.value;
        this.anjTimeChanged.emit({ parsedValue: this.parsedTime });
    }
    parseTime(value) {
        this.parsedTime = this.strategy.parseToTimeFields(value);
    }
    render() {
        return (h("div", { class: (this.strategy.useControl()) ? 'anj-time-picker' : 'anj-time-picker anj-no-control' },
            h("div", { class: "anj-time-controls" },
                h("div", { class: "anj-time-block" },
                    h("anj-time-picker-input", { strategy: this.strategy, value: this.parsedTime.hour, ref: r => this.hourInput = r })),
                h("div", { class: "anj-time-block" },
                    h("anj-time-picker-input", { strategy: this.strategy, minutes: true, value: this.parsedTime.minutes, ref: r => this.minInput = r })),
                (this.strategy.useControl()) ?
                    h("div", { class: "anj-time-block" },
                        h("anj-form-group", { class: "anj-meridian" },
                            h("anj-label", null, "AM/PM"),
                            h("anj-select", { onAnjChange: e => this.controlSelected(e), value: this.parsedTime.control }, this.meridiemOptions.map(option => h("anj-option", { value: option.value }, option.label)))))
                    : undefined)));
    }
    static get is() { return "anj-time-picker-clock"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["./time-picker-clock.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["time-picker-clock.css"]
    }; }
    static get properties() { return {
        "context": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'horizontal' | 'vertical'",
                "resolved": "\"horizontal\" | \"vertical\"",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "context",
            "reflect": true,
            "defaultValue": "'horizontal'"
        },
        "locale": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Locale code for localization"
            },
            "attribute": "locale",
            "reflect": false
        },
        "language": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Language code for translation"
            },
            "attribute": "language",
            "reflect": false
        },
        "meridiem": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Bool to display time in meridiem or military"
            },
            "attribute": "meridiem",
            "reflect": false,
            "defaultValue": "true"
        },
        "value": {
            "type": "any",
            "mutable": true,
            "complexType": {
                "original": "any | null",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": "the value of the time"
            },
            "attribute": "value",
            "reflect": false
        }
    }; }
    static get events() { return [{
            "method": "anjTimeChanged",
            "name": "anjTimeChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when that value is updated"
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "focusHour": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get watchers() { return [{
            "propName": "locale",
            "methodName": "injectedPropWatcher"
        }, {
            "propName": "language",
            "methodName": "injectedPropWatcher"
        }, {
            "propName": "value",
            "methodName": "valueHandler"
        }]; }
    static get listeners() { return [{
            "name": "anjControlDidLoad",
            "method": "onFormElementLoaded",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjLabelDidLoad",
            "method": "onFormElementLoaded",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjBlur",
            "method": "onAnjBlur",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjHourChanged",
            "method": "onAnjHourChange",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjHourTab",
            "method": "onAnjHourTab",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjMinuteChanged",
            "method": "onAnjMinuteChange",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
