'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-9a9efa1c.js');

const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m0 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m1 2v4.5a1 1 0 1 1-2 0V12a1 1 0 1 1 2 0" clip-rule="evenodd"/></svg>';
const alert_info_circle = icon;

const pnDateAndTimeCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-date-and-time pn-date-picker .pn-date-picker{container-type:normal}pn-date-and-time label{color:#5e554a;font-size:1.4rem}pn-date-and-time .time-separator{margin-top:auto;margin-bottom:auto}pn-date-and-time .date-and-time-group{margin-bottom:1rem}pn-date-and-time .date-and-time-row{display:flex;gap:1rem}pn-date-and-time .helper-text{margin-top:0.2rem;color:#5e554a;display:block}pn-date-and-time .error-message{color:#a70707}";
const PnDateAndTimeStyle0 = pnDateAndTimeCss;

const PnDateAndTime = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.dateandtimerange = index.createEvent(this, "dateandtimerange", 7);
        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 = '';
    }
    get hostElement() { return index.getElement(this); }
    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 (index.h(index.Host, { key: '60e68e04200db9303ef2e84dc046a6c92844487f' }, index.h("div", { key: '8857c3a3232caa6b701f30b0f13d02dc2c739e54', class: "date-and-time-group" }, this.dateAndTimeLabel ? (index.h("div", { class: "date-and-time-row" }, index.h("label", null, this.dateAndTimeLabel))) : null, index.h("div", { key: '82e9e3a55361697b37275a0b4e31f5b09bd5eb43', class: "date-and-time-row" }, index.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 ? index.h("small", { class: "date-and-time-row helper-text" }, this.dateHelperText) : null), index.h("div", { key: 'bb00ae7e49da0175ea099d81c8755f35ec14ff77', class: "date-and-time-group" }, index.h("div", { key: '520fd0a41f9acb0e787632490390d6b611ef39be', class: "date-and-time-row" }, index.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$1) => index.h("option", { label: hour, value: hour, selected: index$1 === 0 }, hour))), index.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$1) => index.h("option", { label: minute, value: minute, selected: index$1 === 0 }, minute))), index.h("div", { key: 'd029032c9a94be5cfb576e043ebda297839b3c96', class: "time-separator" }, index.h("span", { key: '8d53aee1b0e9f17708cba86ab0f2a557b81964ad' }, "-")), index.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$1) => index.h("option", { label: hour, value: hour, selected: index$1 === this.hourArr.length - 1 }, hour))), index.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$1) => index.h("option", { label: minute, value: minute, selected: index$1 === this.minuteArr.length - 1 }, minute)))), this.timeHelperText ? index.h("small", { class: "date-and-time-row helper-text" }, this.timeHelperText) : null, this.invalidTimespan && this.errorMessage ? (index.h("small", { class: "date-and-time-row error-message" }, index.h("pn-icon", { icon: alert_info_circle, small: "false", color: "warning" }), this.errorMessage)) : null)));
    }
};
PnDateAndTime.style = PnDateAndTimeStyle0;

exports.pn_date_and_time = PnDateAndTime;

//# sourceMappingURL=pn-date-and-time.cjs.entry.js.map