import { _t } from "../../../text";
import { h } from "@stencil/core";
import { format, getISOWeek, addDays, subDays, setDay } from "date-fns";
import svlocale from "date-fns/locale/sv";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { ButtonVariation } from "../../_button/button/button-variation.enum";
import { CalendarWeekViewHeadingLevel } from "./calendar-week-view-heading-level.enum";
/**
 * @enums CalendarWeekViewHeadingLevel - calendar-week-view-heading-level.enum.ts
 * @swedishName Veckovy
 */
export class CalendarWeekView {
    constructor() {
        this.minDate = new Date();
        this.maxDate = new Date();
        this.dates = [];
        this.weekDays = [];
        this.todaysDate = format(new Date(), 'yyyy-MM-dd', { locale: svlocale });
        this.selectedDate = format(new Date(), 'yyyy-MM-dd', {
            locale: svlocale
        });
        this.currentDate = undefined;
        this.afMinWeek = undefined;
        this.afMaxWeek = undefined;
        this.afDates = '';
        this.afHeadingLevel = CalendarWeekViewHeadingLevel.H2;
        this.afId = randomIdGenerator('digi-calendar-week-view');
    }
    selectedDateChangeHandler() {
        this.afOnDateChange.emit(this.selectedDate);
    }
    currentDateChangeHandler() {
        this.setWeekDates();
    }
    setWeekDates() {
        const newDates = [];
        for (let i = 1; i < 6; i++) {
            const day = setDay(new Date(this.currentDate), i);
            const date = format(new Date(day), 'yyyy-MM-dd', { locale: svlocale });
            newDates.push(date);
        }
        this.weekDays = [...newDates];
    }
    afDatesUpdate() {
        const dateList = [...JSON.parse(this.afDates)];
        this.dates = [
            ...dateList.sort((a, b) => {
                const c = new Date(a);
                const d = new Date(b);
                return this.getTime(c) - this.getTime(d);
            })
        ];
    }
    /**
     * Kan användas för att manuellt sätta om det aktiva datumet. Formatet måste vara 'yyyy-MM-dd'.
     * @en Can be used to set the active date. The format needs to be 'yyy-MM-dd'.
     */
    async afMSetActiveDate(activeDate) {
        this.selectedDate = format(new Date(activeDate), 'yyyy-MM-dd', {
            locale: svlocale
        });
        this.currentDate = this.selectedDate;
    }
    getTime(date) {
        return date != null ? date.getTime() : 0;
    }
    prevWeek() {
        this.currentDate = subDays(new Date(this.currentDate), 7);
        this.afOnWeekChange.emit('previous');
    }
    nextWeek() {
        this.currentDate = addDays(new Date(this.currentDate), 7);
        this.afOnWeekChange.emit('next');
    }
    initDates() {
        this.minDate = new Date(this.dates[0]);
        this.maxDate = new Date(this.dates[this.dates.length - 1]);
        this.selectedDate = format(new Date(this.dates[0]), 'yyyy-MM-dd', {
            locale: svlocale
        });
        this.currentDate = format(new Date(this.selectedDate), 'yyyy-MM-dd', {
            locale: svlocale
        });
    }
    componentWillLoad() {
        this.afDatesUpdate();
        this.initDates();
    }
    componentDidLoad() {
        this.afOnReady.emit();
    }
    get prevWeekText() {
        const nextWeekDate = subDays(new Date(this.currentDate), 7);
        return `${_t.calendar.week} ${getISOWeek(new Date(nextWeekDate))}`;
    }
    get nextWeekText() {
        const nextWeekDate = addDays(new Date(this.currentDate), 7);
        return `${_t.calendar.week} ${getISOWeek(new Date(nextWeekDate))}`;
    }
    get currentWeek() {
        return getISOWeek(new Date(this.currentDate));
    }
    get currentMonth() {
        const firstDate = new Date(this.weekDays[0]);
        const lastDate = new Date(this.weekDays[this.weekDays.length - 1]);
        return firstDate.getMonth() == lastDate.getMonth()
            ? format(new Date(firstDate), 'MMMM yyyy', { locale: svlocale })
            : format(new Date(firstDate), 'MMMM yyyy', { locale: svlocale }) +
                ' - ' +
                format(new Date(lastDate), 'MMMM yyyy', { locale: svlocale });
    }
    render() {
        return (h("div", { key: '967ccb9710018973a960ae36d52157ba85dacfed', class: "digi-calendar-week-view" }, h("nav", { key: '6a9137d8f8a8e652d26d099ae652cb76e5665b51', class: "digi-calendar-week-view__timepicker" }, h("div", { key: 'a2b8aaeaa93e391e65847b2ea8f9b455e86474f1', class: "digi-calendar-week-view__dates" }, h("div", { key: '0cc675c0cd67d042e5e27a38a6665ab30e516cea', class: "digi-calendar-week-view__flex" }, h("digi-typography", { key: 'd47f59955354cb435dc80895059c6e4fd6eefa8a' }, h(this.afHeadingLevel, { key: 'f01725e82afff23b8ae357b30af909b325d85279', role: "status", class: "digi-calendar-week-view__heading" }, h("span", { key: 'bbfab19eec8776e640ed235654c0fd960faf5722', class: "digi-calendar-week-view__month" }, this.currentMonth), h("span", { key: 'a3a52801083cd83351056d474e01df926d8b0117', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), h("ul", { key: 'a3f3703318fa5400cd32ee5d3af896900a032acd', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
            const date = format(new Date(dateItem), 'd', {
                locale: svlocale
            });
            const day = format(new Date(dateItem), 'EEE', {
                locale: svlocale
            });
            const fullDay = format(new Date(dateItem), 'EEEE ', {
                locale: svlocale
            });
            return (h("li", { class: "digi-calendar-week-view__date-list-item", "aria-current": dateItem === this.todaysDate && 'date' }, h("digi-button", { onClick: () => (this.selectedDate = dateItem), afAriaLabel: `${fullDay} ${date}`, "aria-hidden": !this.dates.includes(dateItem) ? 'true' : 'false', "af-tabindex": !this.dates.includes(dateItem) ? -1 : null, "aria-pressed": this.selectedDate == dateItem ? 'true' : 'false', class: {
                    'digi-calendar-week-view__date-button': true,
                    'digi-calendar-week-view__date-button--active': this.selectedDate == dateItem,
                    'digi-calendar-week-view__date-button--no-value': !this.dates.includes(dateItem)
                }, "af-variation": ButtonVariation.SECONDARY }, h("span", { class: "digi-calendar-week-view__date-button-content", "aria-hidden": "true" }, h("span", { class: {
                    'digi-calendar-week-view__date-button-day': this.selectedDate != dateItem,
                    'digi-calendar-week-view__date-button-day--active': this.selectedDate == dateItem
                } }, day), h("span", { class: "digi-calendar-week-view__date-button-date" }, date), h("span", { "aria-hidden": "true", class: {
                    'digi-calendar-week-view__date-button-circle': dateItem === this.todaysDate
                } })))));
        })))), h("digi-button", { key: '2edb685459c4cbf8a0120ab340672b17d0ea3f9f', onClick: () => this.prevWeek(), class: {
                'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--previous': true,
                'digi-calendar-week-view__week-button--keep-left': this.currentWeek == getISOWeek(this.maxDate),
                'digi-calendar-week-view__week-button--hidden': !(this.currentWeek > getISOWeek(this.minDate))
            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: '8948b12a1654f9ef46728ea8de3b1df5f40addcd', slot: "icon" }), this.prevWeekText), h("digi-button", { key: '729ed8eebce68168b66c5365588a52b1279eec3f', onClick: () => this.nextWeek(), class: {
                'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--next': true,
                'digi-calendar-week-view__week-button--keep-right': this.currentWeek == getISOWeek(this.minDate),
                'digi-calendar-week-view__week-button--hidden': !(this.currentWeek < getISOWeek(this.maxDate))
            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: '75bf1669a5d9dd3f618661c79202dc8e69f6c8ea', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: 'c7379a321936f28783d2f7a4e1e94d0b119de471', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: 'f7e55435a94c5bff18a3b4b7bfa5d397291f7e8c' }, h("slot", { key: '7c59e144a47c721f5f4a454b9776c708f6d2f15c' })))));
    }
    static get is() { return "digi-calendar-week-view"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["calendar-week-view.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["calendar-week-view.css"]
        };
    }
    static get properties() {
        return {
            "afMinWeek": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "af-min-week",
                "reflect": false
            },
            "afMaxWeek": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "af-max-week",
                "reflect": false
            },
            "afDates": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "List of selectable dates"
                        }],
                    "text": "Lista \u00F6ver valbara datum"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-dates",
                "reflect": false,
                "defaultValue": "''"
            },
            "afHeadingLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "CalendarWeekViewHeadingLevel",
                    "resolved": "CalendarWeekViewHeadingLevel.H1 | CalendarWeekViewHeadingLevel.H2 | CalendarWeekViewHeadingLevel.H3 | CalendarWeekViewHeadingLevel.H4 | CalendarWeekViewHeadingLevel.H5 | CalendarWeekViewHeadingLevel.H6",
                    "references": {
                        "CalendarWeekViewHeadingLevel": {
                            "location": "import",
                            "path": "./calendar-week-view-heading-level.enum",
                            "id": "src/components/_calendar/week-view/calendar-week-view-heading-level.enum.ts::CalendarWeekViewHeadingLevel"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set heading level. Default is 'h2'"
                        }],
                    "text": "S\u00E4tt rubrikens vikt. 'h2' \u00E4r f\u00F6rvalt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading-level",
                "reflect": false,
                "defaultValue": "CalendarWeekViewHeadingLevel.H2"
            },
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input id attribute. Defaults to random string."
                        }],
                    "text": "S\u00E4tter attributet 'id'. Om inget v\u00E4ljs s\u00E5 skapas ett slumpm\u00E4ssigt id."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-calendar-week-view')"
            }
        };
    }
    static get states() {
        return {
            "dates": {},
            "weekDays": {},
            "todaysDate": {},
            "selectedDate": {},
            "currentDate": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnWeekChange",
                "name": "afOnWeekChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When week changes"
                        }],
                    "text": "Vid byte av vecka"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "afOnDateChange",
                "name": "afOnDateChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When day changes"
                        }],
                    "text": "Vid byte av dag"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "afOnReady",
                "name": "afOnReady",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When the component and slots are loaded and initialized this event will trigger."
                        }],
                    "text": "N\u00E4r komponenten och slotsen \u00E4r laddade och initierade s\u00E5 skickas detta eventet."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "afMSetActiveDate": {
                "complexType": {
                    "signature": "(activeDate: string) => Promise<void>",
                    "parameters": [{
                            "name": "activeDate",
                            "type": "string",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Kan anv\u00E4ndas f\u00F6r att manuellt s\u00E4tta om det aktiva datumet. Formatet m\u00E5ste vara 'yyyy-MM-dd'.",
                    "tags": [{
                            "name": "en",
                            "text": "Can be used to set the active date. The format needs to be 'yyy-MM-dd'."
                        }]
                }
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "selectedDate",
                "methodName": "selectedDateChangeHandler"
            }, {
                "propName": "currentDate",
                "methodName": "currentDateChangeHandler"
            }, {
                "propName": "afDates",
                "methodName": "afDatesUpdate"
            }];
    }
}
