import { h } from "@stencil/core";
/**
 * This component can receive one or two date values,
 * and display them in a nice responsive layout, using date pickers.
 *
 * :::note
 * The component needs to be provided at least with one value as
 * `startTime` or `endTime` to get rendered correctly.
 * :::
 *
 * The most common use case is to visualize a range for an event
 * that has a start and end time.
 *
 * The end user can use the date pickers displayed in the UI,
 * to change the start and end time. When these values are changed
 * by the user, the component emits events.
 *
 * @exampleComponent limebb-example-date-range
 */
export class DateRange {
    constructor() {
        this.handleStartTimeChange = (event) => {
            event.stopPropagation();
            this.changeStartTime.emit(event.detail);
        };
        this.handleEndTimeChange = (event) => {
            event.stopPropagation();
            this.changeEndTime.emit(event.detail);
        };
    }
    componentWillLoad() {
        this.originalStartTime = this.startTime;
        this.originalEndTime = this.endTime;
    }
    render() {
        return (h("div", { key: '8dc6bd4fda6f6e713d422bf0f03b10dd7a613c48', class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
    }
    renderStartDatePicker() {
        if (!this.originalStartTime) {
            return;
        }
        return (h("div", { class: "start-time" }, this.renderDatePicker(this.startTimeLabel, this.startTime, !this.startTime, this.handleStartTimeChange)));
    }
    renderEndDatePicker() {
        if (!this.originalEndTime) {
            return;
        }
        return (h("div", { class: "end-time" }, this.renderDatePicker(this.endTimeLabel, this.endTime, !this.endTime, this.handleEndTimeChange)));
    }
    renderDatePicker(label, value, isInvalid, onChangeHandler) {
        const datePicker = this.platform && (h("limebb-date-picker", { platform: this.platform, context: this.context, type: this.type, value: value, onChange: onChangeHandler, invalid: isInvalid }));
        return [
            h("div", { class: "label-group" }, h("span", { class: "circle" }), h("span", { class: "label" }, label), h("span", { class: "line" })),
            datePicker || (h("limel-date-picker", { type: this.type, value: value, format: this.timeFormat, language: this.language, onChange: onChangeHandler, invalid: isInvalid })),
        ];
    }
    static get is() { return "limebb-date-range"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["date-range.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["date-range.css"]
        };
    }
    static get properties() {
        return {
            "platform": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentPlatform",
                    "resolved": "LimeWebComponentPlatform",
                    "references": {
                        "LimeWebComponentPlatform": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentPlatform",
                            "referenceLocation": "LimeWebComponentPlatform"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                },
                "getter": false,
                "setter": false
            },
            "context": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentContext",
                    "resolved": "LimeWebComponentContext",
                    "references": {
                        "LimeWebComponentContext": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentContext",
                            "referenceLocation": "LimeWebComponentContext"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                },
                "getter": false,
                "setter": false
            },
            "startTime": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Date",
                    "resolved": "Date | undefined",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The start time"
                },
                "getter": false,
                "setter": false
            },
            "endTime": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Date",
                    "resolved": "Date | undefined",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A secondary optional time, which is the time when an event ends."
                },
                "getter": false,
                "setter": false
            },
            "startTimeLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label that appears together with the date picker of `startTime`"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "start-time-label"
            },
            "endTimeLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label that appears together with the date picker of `endTime`"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "end-time-label"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Languages",
                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
                    "references": {
                        "Languages": {
                            "location": "import",
                            "path": "@limetech/lime-elements",
                            "id": "node_modules::Languages",
                            "referenceLocation": "Languages"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "ignored if `platform` is set"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language"
            },
            "timeFormat": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "ignored if `platform` is set"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "time-format"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "DateType",
                    "resolved": "\"date\" | \"datetime\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\"",
                    "references": {
                        "DateType": {
                            "location": "import",
                            "path": "@limetech/lime-elements",
                            "id": "node_modules::DateType",
                            "referenceLocation": "DateType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Type of date picker.\nThe type can be \"date\" | \"datetime\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type"
            }
        };
    }
    static get events() {
        return [{
                "method": "changeStartTime",
                "name": "changeStartTime",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the start time value has changed by the end user,\nusing the date pickers in the UI."
                },
                "complexType": {
                    "original": "Date",
                    "resolved": "Date",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                }
            }, {
                "method": "changeEndTime",
                "name": "changeEndTime",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the end time value has changed by the end user,\nusing the date pickers in the UI."
                },
                "complexType": {
                    "original": "Date",
                    "resolved": "Date",
                    "references": {
                        "Date": {
                            "location": "global",
                            "id": "global::Date"
                        }
                    }
                }
            }];
    }
}
