import { h, Host } from "@stencil/core";
import { alert_info_circle } from "pn-design-assets/pn-assets/icons.js";
export class PnDateAndTime {
    constructor() {
        this.languageCode = null;
        this.dateAndTimeLabel = '';
        this.dateDaysFromToday = 0;
        this.validTimeRangeMinutes = 0;
        this.errorMessage = '';
        this.dateHelperText = '';
        this.timeHelperText = '';
        this.disableWeekends = false;
        this.disabledDates = null;
        this.datePlaceholder = '';
        this.minFromHour = undefined;
        this.maxToHour = undefined;
        this.language = null;
        this.hourArr = null;
        this.minuteArr = null;
        this.formValue = null;
        this.invalidTimespan = false;
        this.selectedDate = null;
        this.selectedFromHour = undefined;
        this.selectedFromMin = undefined;
        this.selectedToHour = undefined;
        this.selectedToMin = undefined;
        this.firstValidDateString = '';
        this.lastValidDateString = '';
    }
    hostElement;
    pnDatePicker = null;
    pnTimeFromHourDropdown = null;
    pnTimeFromMinuteDropdown = null;
    pnTimeToHourDropdown = null;
    pnTimeToMinuteDropdown = null;
    dateandtimerange;
    componentWillLoad() {
        this.setInitialValues();
    }
    componentDidLoad() {
        this.setDefaultHiddenValue();
        this.addEventHandlers();
    }
    setInitialValues() {
        this.setLanguageCode();
        this.setFirstValidDate();
        if (!this.minFromHour) {
            this.minFromHour = 14;
        }
        if (!this.maxToHour) {
            this.maxToHour = 17;
        }
        this.hourArr = this.getNumbersAsStringArr(this.minFromHour, this.maxToHour, 1);
        this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);
    }
    setFirstValidDate() {
        const date = new Date();
        date.setDate(date.getDate() + this.dateDaysFromToday);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const endYear = year + 2;
        this.firstValidDateString = `${year.toString()}-${month}-${day}`;
        this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;
    }
    setLanguageCode() {
        if (typeof this.languageCode === 'string' && this.languageCode.trim() === '') {
            this.language = document.querySelector('html').lang;
        }
        else {
            this.language = this.languageCode;
        }
    }
    setDefaultHiddenValue() {
        this.selectedFromHour = parseInt(this.hourArr[0]);
        this.selectedFromMin = parseInt(this.minuteArr[0]);
        this.selectedToHour = parseInt(this.hourArr[this.hourArr.length - 1]);
        this.selectedToMin = parseInt(this.minuteArr[this.minuteArr.length - 1]);
        this.updateHiddenValue();
    }
    addEventHandlers() {
        const boundHandleChange = this.handleChange.bind(this);
        this.pnDatePicker.addEventListener('dateselection', boundHandleChange);
        this.pnTimeFromHourDropdown.addEventListener('change', boundHandleChange);
        this.pnTimeFromMinuteDropdown.addEventListener('change', boundHandleChange);
        this.pnTimeToHourDropdown.addEventListener('change', boundHandleChange);
        this.pnTimeToMinuteDropdown.addEventListener('change', boundHandleChange);
    }
    handleChange(e) {
        if (e.target === this.pnDatePicker) {
            this.selectedDate = e.detail.start;
        }
        const target = e.target;
        const value = target.value;
        if (target.name === this.pnTimeFromHourDropdown.name) {
            this.selectedFromHour = parseInt(value);
        }
        else if (target.name === this.pnTimeFromMinuteDropdown.name) {
            this.selectedFromMin = parseInt(value);
        }
        else if (target.name === this.pnTimeToHourDropdown.name) {
            this.selectedToHour = parseInt(value);
        }
        else if (target.name === this.pnTimeToMinuteDropdown.name) {
            this.selectedToMin = parseInt(value);
        }
        this.updateHiddenValue();
    }
    updateHiddenValue() {
        const date = new Date();
        const dateFrom = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedFromHour, this.selectedFromMin, 0, 0);
        const dateTo = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedToHour, this.selectedToMin, 0, 0);
        this.validateTimeRange(dateFrom.getTime(), dateTo.getTime());
        if (this.invalidTimespan || !this.selectedDate) {
            this.formValue = '';
        }
        else {
            const fromMin = this.selectedFromMin.toString().padStart(2, '0');
            const toMin = this.selectedToMin.toString().padStart(2, '0');
            this.formValue = `${this.selectedDate}, ${this.selectedFromHour}:${fromMin}-${this.selectedToHour}:${toMin}`;
        }
        this.dateandtimerange.emit(this.formValue);
    }
    validateTimeRange(from, to) {
        let differenceValue = (to - from) / 1000;
        differenceValue /= 60;
        this.invalidTimespan = differenceValue < this.validTimeRangeMinutes ? true : false;
    }
    getNumbersAsStringArr(start, stop, step) {
        const arr = Array.from({ length: (stop - start) / step + 1 }, (_, index) => start + index * step);
        const result = [];
        arr.forEach(item => {
            const itemAsString = item.toString().padStart(2, '0');
            result.push(itemAsString);
        });
        return result;
    }
    removePnOptionSelected() {
        const selectOptions = this.hostElement.querySelectorAll('option');
        selectOptions.forEach(elm => {
            elm.removeAttribute('selected');
        });
    }
    render() {
        return (h(Host, { key: '60e68e04200db9303ef2e84dc046a6c92844487f' }, h("div", { key: '8857c3a3232caa6b701f30b0f13d02dc2c739e54', class: "date-and-time-group" }, this.dateAndTimeLabel ? (h("div", { class: "date-and-time-row" }, h("label", null, this.dateAndTimeLabel))) : null, h("div", { key: '82e9e3a55361697b37275a0b4e31f5b09bd5eb43', class: "date-and-time-row" }, h("pn-date-picker", { key: 'efdd2e74f7eb8064073b9ab8d5a101edfa811a29', ref: el => (this.pnDatePicker = el), range: "false", "disable-weekends": this.disableWeekends, "min-date": this.firstValidDateString, "max-date": this.lastValidDateString, language: this.language, placeholder: this.datePlaceholder, "disabled-dates": this.disabledDates })), this.dateHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.dateHelperText) : null), h("div", { key: 'bb00ae7e49da0175ea099d81c8755f35ec14ff77', class: "date-and-time-group" }, h("div", { key: '520fd0a41f9acb0e787632490390d6b611ef39be', class: "date-and-time-row" }, h("pn-select", { key: 'c220a53c6135045a4abdc1926873b5cbb6244884', ref: el => (this.pnTimeFromHourDropdown = el), name: "date-and-time-from-hour", class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, this.hourArr?.map((hour, index) => h("option", { label: hour, value: hour, selected: index === 0 }, hour))), h("pn-select", { key: 'a7b33b9a750700b9817128a9c1adfebab794a6a3', ref: el => (this.pnTimeFromMinuteDropdown = el), name: "date-and-time-from-minute", class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, this.minuteArr?.map((minute, index) => h("option", { label: minute, value: minute, selected: index === 0 }, minute))), h("div", { key: 'd029032c9a94be5cfb576e043ebda297839b3c96', class: "time-separator" }, h("span", { key: '8d53aee1b0e9f17708cba86ab0f2a557b81964ad' }, "-")), h("pn-select", { key: 'faedc85315a18f59f965377ff03eb5ba77416c7a', ref: el => (this.pnTimeToHourDropdown = el), name: "date-and-time-to-hour", class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, this.hourArr?.map((hour, index) => h("option", { label: hour, value: hour, selected: index === this.hourArr.length - 1 }, hour))), h("pn-select", { key: 'b747f94f3adf68590ec32c17afc8ac2dfd8a2266', ref: el => (this.pnTimeToMinuteDropdown = el), name: "date-and-time-to-minute", class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, this.minuteArr?.map((minute, index) => h("option", { label: minute, value: minute, selected: index === this.minuteArr.length - 1 }, minute)))), this.timeHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.timeHelperText) : null, this.invalidTimespan && this.errorMessage ? (h("small", { class: "date-and-time-row error-message" }, h("pn-icon", { icon: alert_info_circle, small: "false", color: "warning" }), this.errorMessage)) : null)));
    }
    static get is() { return "pn-date-and-time"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-date-and-time.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-date-and-time.css"]
        };
    }
    static get properties() {
        return {
            "languageCode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "language-code",
                "reflect": false,
                "defaultValue": "null"
            },
            "dateAndTimeLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "date-and-time-label",
                "reflect": false,
                "defaultValue": "''"
            },
            "dateDaysFromToday": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "date-days-from-today",
                "reflect": false,
                "defaultValue": "0"
            },
            "validTimeRangeMinutes": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "valid-time-range-minutes",
                "reflect": false,
                "defaultValue": "0"
            },
            "errorMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "error-message",
                "reflect": false,
                "defaultValue": "''"
            },
            "dateHelperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "date-helper-text",
                "reflect": false,
                "defaultValue": "''"
            },
            "timeHelperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "time-helper-text",
                "reflect": false,
                "defaultValue": "''"
            },
            "disableWeekends": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "disable-weekends",
                "reflect": false,
                "defaultValue": "false"
            },
            "disabledDates": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "disabled-dates",
                "reflect": false,
                "defaultValue": "null"
            },
            "datePlaceholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "date-placeholder",
                "reflect": false,
                "defaultValue": "''"
            },
            "minFromHour": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "min-from-hour",
                "reflect": false
            },
            "maxToHour": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "max-to-hour",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "language": {},
            "hourArr": {},
            "minuteArr": {},
            "formValue": {},
            "invalidTimespan": {},
            "selectedDate": {},
            "selectedFromHour": {},
            "selectedFromMin": {},
            "selectedToHour": {},
            "selectedToMin": {},
            "firstValidDateString": {},
            "lastValidDateString": {}
        };
    }
    static get events() {
        return [{
                "method": "dateandtimerange",
                "name": "dateandtimerange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-date-and-time.js.map
