import { h } from "@stencil/core";
import translate from "../../../global/translations";
import { DatePicker as DateOnlyPicker } from "../pickers/date-picker";
import { DatetimePicker } from "../pickers/datetime-picker";
import { MonthPicker } from "../pickers/month-picker";
import { QuarterPicker } from "../pickers/quarter-picker";
import { TimePicker } from "../pickers/time-picker";
import { WeekPicker } from "../pickers/week-picker";
import { YearPicker } from "../pickers/year-picker";
/**
 * This component is internal and only supposed to be used by
 * the limel-date-picker. This component is needed in order for us
 * to render the flatpickr calendar in a portal.
 *
 * @private
 */
export class DatePickerCalendar {
    constructor() {
        /**
         * Type of date picker.
         */
        this.type = 'datetime';
        /**
         * Defines the localisation for translations and date formatting.
         * Property `format` customizes the localized date format.
         */
        this.language = 'en';
        this.flatPickrCreated = false;
    }
    componentWillLoad() {
        switch (this.type) {
            case 'date': {
                this.picker = new DateOnlyPicker(this.language, this.change, this.format);
                break;
            }
            case 'time': {
                this.picker = new TimePicker(this.language, this.change, this.format);
                break;
            }
            case 'week': {
                this.picker = new WeekPicker(this.language, this.change, this.format);
                break;
            }
            case 'month': {
                this.picker = new MonthPicker(this.language, this.change, translate, this.format);
                break;
            }
            case 'quarter': {
                this.picker = new QuarterPicker(this.language, this.change, translate, this.format);
                break;
            }
            case 'year': {
                this.picker = new YearPicker(this.language, this.change, translate, this.format);
                break;
            }
            default: {
                this.picker = new DatetimePicker(this.language, this.change, this.format);
                break;
            }
        }
        if (this.formatter) {
            this.picker.formatter = this.formatter;
        }
    }
    componentDidUpdate() {
        if (!this.flatPickrCreated) {
            this.createFlatpickr();
        }
        else if (!this.isOpen) {
            this.picker.setValue(this.value);
        }
    }
    createFlatpickr() {
        var _a, _b;
        if (!this.inputElement) {
            // The input element is programatically set on this element
            // after its been rendered.
            return;
        }
        if (!this.isOpen ||
            ((_b = (_a = this.container).checkVisibility) === null || _b === void 0 ? void 0 : _b.call(_a)) === false) {
            return;
        }
        this.picker.init(this.inputElement, this.container, this.value);
        this.flatPickrCreated = true;
    }
    disconnectedCallback() {
        this.picker.destroy();
        this.flatPickrCreated = false;
    }
    render() {
        return (h("div", { key: '33ab0c2d6f9f7f9907b98730d5f0f81de0c80535', class: "container", ref: (el) => (this.container = el), style: {
                '--today-label': `"${translate.get('date-picker.today')}"`,
            } }));
    }
    static get is() { return "limel-flatpickr-adapter"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["flatpickr-adapter.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["flatpickr-adapter.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Date",
                    "resolved": "Date",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the field."
                },
                "getter": false,
                "setter": false
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "DateType",
                    "resolved": "\"date\" | \"datetime\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\"",
                    "references": {
                        "DateType": {
                            "location": "import",
                            "path": "../../date-picker/date.types",
                            "id": "src/components/date-picker/date.types.ts::DateType",
                            "referenceLocation": "DateType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Type of date picker."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "'datetime'"
            },
            "format": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Format to display the selected date in."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "format"
            },
            "isOpen": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` if the calendar should be open."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-open"
            },
            "inputElement": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "HTMLElement",
                    "resolved": "HTMLElement",
                    "references": {
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The native input element to use with flatpickr."
                },
                "getter": false,
                "setter": false
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Languages",
                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
                    "references": {
                        "Languages": {
                            "location": "import",
                            "path": "../../date-picker/date.types",
                            "id": "src/components/date-picker/date.types.ts::Languages",
                            "referenceLocation": "Languages"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the localisation for translations and date formatting.\nProperty `format` customizes the localized date format."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language",
                "defaultValue": "'en'"
            },
            "formatter": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(date: Date) => string",
                    "resolved": "(date: Date) => string",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get events() {
        return [{
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the date picker value is changed."
                },
                "complexType": {
                    "original": "Date",
                    "resolved": "Date",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                }
            }];
    }
}
