import { h } from "@stencil/core";
import Tunnel from '../../locale/i18n.provider';
var AttributeTitles;
(function (AttributeTitles) {
    AttributeTitles["CHANGE_MONTH"] = "Change Month";
    AttributeTitles["PREV_MONTH"] = "Previous Month";
    AttributeTitles["TODAY"] = "Today";
    AttributeTitles["NEXT_MONTH"] = "Next Month";
})(AttributeTitles || (AttributeTitles = {}));
export class MonthView {
    constructor() {
        this.today = new Date();
    }
    monthUpdateHandler(value) {
        this.anjMonthUpdated.emit(value);
    }
    modeChangeHandler(value) {
        this.anjToggleMonthMode.emit(value);
    }
    modeChangeText() {
        const month = this.package.months[this.package.month] || '';
        const year = this.package.year;
        return `${month.slice(0, 3)} ${year}`;
    }
    onToday() {
        this.anjDaySelect.emit({
            day: this.today.getDate(),
            month: this.package.adapter.month(this.today),
            year: this.package.adapter.year(this.today)
        });
    }
    render() {
        const todayDisabled = this.package.adapter.isDisabled(this.today, this.rangeParams);
        return [
            h("div", { class: "anj-calendar-top" },
                h("anj-button", { context: "text", class: "anj-current", title: this.translator(AttributeTitles.CHANGE_MONTH), onClick: () => this.modeChangeHandler(false) },
                    h("span", null, this.modeChangeText()),
                    h("anj-icon-opener", { slot: "end" })),
                h("div", { class: "anj-date-nav" },
                    h("anj-button", { context: "icon", title: this.translator(AttributeTitles.PREV_MONTH), "aria-label": this.translator(AttributeTitles.PREV_MONTH), onClick: () => this.monthUpdateHandler(-1) },
                        h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                            h("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }))),
                    h("anj-button", { context: "icon", disabled: todayDisabled, title: this.translator(AttributeTitles.TODAY), "aria-label": this.translator(AttributeTitles.TODAY), onClick: () => this.onToday() },
                        h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                            h("circle", { cx: "12", cy: "12", r: "6" }))),
                    h("anj-button", { context: "icon", title: this.translator(AttributeTitles.NEXT_MONTH), "aria-label": this.translator(AttributeTitles.NEXT_MONTH), onClick: () => this.monthUpdateHandler(1) },
                        h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                            h("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }))))),
            h("div", { class: "anj-week-container" }, this.package.weekdays.map(label => h("span", null, label[0]))),
            h("div", { class: "anj-calendar-inner" }, this.package.days.map(day => h("anj-date-picker-day", { adapter: this.package.adapter, day: day, month: this.package.month, date: this.package.date, rangeParams: this.rangeParams })))
        ];
    }
    static get is() { return "anj-date-picker-month-view"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["month-view.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["month-view.css"]
    }; }
    static get properties() { return {
        "package": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "CalendarPackage",
                "resolved": "CalendarPackage",
                "references": {
                    "CalendarPackage": {
                        "location": "import",
                        "path": "../../../types/types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "rangeParams": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "range-params",
            "reflect": false
        },
        "translator": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "IntlFormatFn",
                "resolved": "(value: any, variables?: any) => string",
                "references": {
                    "IntlFormatFn": {
                        "location": "import",
                        "path": "../../locale/i18n.provider"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [{
                        "text": undefined,
                        "name": "internal"
                    }],
                "text": ""
            }
        }
    }; }
    static get events() { return [{
            "method": "anjToggleMonthMode",
            "name": "anjToggleMonthMode",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjMonthUpdated",
            "name": "anjMonthUpdated",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjDaySelect",
            "name": "anjDaySelect",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the today button is clicked"
            },
            "complexType": {
                "original": "DayWithMetadata",
                "resolved": "DayWithMetadata",
                "references": {
                    "DayWithMetadata": {
                        "location": "import",
                        "path": "../../../types/types"
                    }
                }
            }
        }]; }
}
Tunnel.injectProps(MonthView, ['translator']);
