/* eslint no-unused-vars: 0 */
import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@gsmlg/ui5-webcomponents-base/dist/renderer/LitRenderer.js";

const block0 = (context, tags, suffix) => suffix ? html`<${scopeTag("ui5-responsive-popover", tags, suffix)} id="${ifDefined(context._id)}-responsive-popover" allow-target-overlap placement-type="Bottom" horizontal-align="Left" ?disable-scrolling="${context._isIE}" hide-arrow ?_hide-header=${ifDefined(context._shouldHideHeader)} @keydown="${context._onkeydown}" @ui5-after-close="${ifDefined(context.onResponsivePopoverAfterClose)}">${ context.showHeader ? block1(context, tags, suffix) : undefined }<div class="ui5-dt-picker-content ${classMap(context.classes.picker)}"><${scopeTag("ui5-calendar", tags, suffix)} class="ui5-dt-cal ${classMap(context.classes.dateTimeView)}" id="${ifDefined(context._id)}-calendar" primary-calendar-type="${ifDefined(context._primaryCalendarType)}" secondary-calendar-type="${ifDefined(context.secondaryCalendarType)}" format-pattern="${ifDefined(context._formatPattern)}" timestamp="${ifDefined(context._calendarTimestamp)}" .selectionMode="${ifDefined(context._calendarSelectionMode)}" .minDate="${ifDefined(context.minDate)}" .maxDate="${ifDefined(context.maxDate)}" @ui5-selected-dates-change="${ifDefined(context.onSelectedDatesChange)}" @ui5-show-month-press="${ifDefined(context.onHeaderShowMonthPress)}" @ui5-show-year-press="${ifDefined(context.onHeaderShowYearPress)}" ?hide-week-numbers="${context.hideWeekNumbers}" ._currentPicker="${ifDefined(context._calendarCurrentPicker)}">${ repeat(context._calendarSelectedDates, (item, index) => item._id || index, (item, index) => block3(item, index, context, tags, suffix)) }</${scopeTag("ui5-calendar", tags, suffix)}>${ !context.phone ? block4(context, tags, suffix) : undefined }<${scopeTag("ui5-time-selection", tags, suffix)} id="${ifDefined(context._id)}-time-sel" class="ui5-dt-time ${classMap(context.classes.dateTimeView)}" value="${ifDefined(context._timeSelectionValue)}" format-pattern="${ifDefined(context._formatPattern)}" ._currentSlider="${ifDefined(context._currentTimeSlider)}" ._calendarType="${ifDefined(context._primaryCalendarType)}" @ui5-change="${ifDefined(context.onTimeSelectionChange)}" @ui5-slider-change="${ifDefined(context.onTimeSliderChange)}"></${scopeTag("ui5-time-selection", tags, suffix)}></div>${ context.showFooter ? block5(context, tags, suffix) : undefined }</${scopeTag("ui5-responsive-popover", tags, suffix)}> ` : html`<ui5-responsive-popover id="${ifDefined(context._id)}-responsive-popover" allow-target-overlap placement-type="Bottom" horizontal-align="Left" ?disable-scrolling="${context._isIE}" hide-arrow ?_hide-header=${ifDefined(context._shouldHideHeader)} @keydown="${context._onkeydown}" @ui5-after-close="${ifDefined(context.onResponsivePopoverAfterClose)}">${ context.showHeader ? block1(context, tags, suffix) : undefined }<div class="ui5-dt-picker-content ${classMap(context.classes.picker)}"><ui5-calendar class="ui5-dt-cal ${classMap(context.classes.dateTimeView)}" id="${ifDefined(context._id)}-calendar" primary-calendar-type="${ifDefined(context._primaryCalendarType)}" secondary-calendar-type="${ifDefined(context.secondaryCalendarType)}" format-pattern="${ifDefined(context._formatPattern)}" timestamp="${ifDefined(context._calendarTimestamp)}" .selectionMode="${ifDefined(context._calendarSelectionMode)}" .minDate="${ifDefined(context.minDate)}" .maxDate="${ifDefined(context.maxDate)}" @ui5-selected-dates-change="${ifDefined(context.onSelectedDatesChange)}" @ui5-show-month-press="${ifDefined(context.onHeaderShowMonthPress)}" @ui5-show-year-press="${ifDefined(context.onHeaderShowYearPress)}" ?hide-week-numbers="${context.hideWeekNumbers}" ._currentPicker="${ifDefined(context._calendarCurrentPicker)}">${ repeat(context._calendarSelectedDates, (item, index) => item._id || index, (item, index) => block3(item, index, context, tags, suffix)) }</ui5-calendar>${ !context.phone ? block4(context, tags, suffix) : undefined }<ui5-time-selection id="${ifDefined(context._id)}-time-sel" class="ui5-dt-time ${classMap(context.classes.dateTimeView)}" value="${ifDefined(context._timeSelectionValue)}" format-pattern="${ifDefined(context._formatPattern)}" ._currentSlider="${ifDefined(context._currentTimeSlider)}" ._calendarType="${ifDefined(context._primaryCalendarType)}" @ui5-change="${ifDefined(context.onTimeSelectionChange)}" @ui5-slider-change="${ifDefined(context.onTimeSliderChange)}"></ui5-time-selection></div>${ context.showFooter ? block5(context, tags, suffix) : undefined }</ui5-responsive-popover> `;
const block1 = (context, tags, suffix) => html`${ context.phone ? block2(context, tags, suffix) : undefined }`;
const block2 = (context, tags, suffix) => suffix ? html`<div class="ui5-dt-picker-header"><${scopeTag("ui5-segmented-button", tags, suffix)} class="ui5-dt-picker-toggle-button"><${scopeTag("ui5-toggle-button", tags, suffix)} key="Date" ?pressed="${context.showDateView}" @click="${context._dateTimeSwitchChange}">${ifDefined(context.btnDateLabel)}</${scopeTag("ui5-toggle-button", tags, suffix)}><${scopeTag("ui5-toggle-button", tags, suffix)} key="Time" ?pressed="${context.showTimeView}" @click="${context._dateTimeSwitchChange}">${ifDefined(context.btnTimeLabel)}</${scopeTag("ui5-toggle-button", tags, suffix)}></${scopeTag("ui5-segmented-button", tags, suffix)}></div>` : html`<div class="ui5-dt-picker-header"><ui5-segmented-button class="ui5-dt-picker-toggle-button"><ui5-toggle-button key="Date" ?pressed="${context.showDateView}" @click="${context._dateTimeSwitchChange}">${ifDefined(context.btnDateLabel)}</ui5-toggle-button><ui5-toggle-button key="Time" ?pressed="${context.showTimeView}" @click="${context._dateTimeSwitchChange}">${ifDefined(context.btnTimeLabel)}</ui5-toggle-button></ui5-segmented-button></div>`;
const block3 = (item, index, context, tags, suffix) => suffix ? html`<${scopeTag("ui5-date", tags, suffix)} value="${ifDefined(item)}"></${scopeTag("ui5-date", tags, suffix)}>` : html`<ui5-date value="${ifDefined(item)}"></ui5-date>`;
const block4 = (context, tags, suffix) => html`<span class="ui5-dt-picker-separator"></span>`;
const block5 = (context, tags, suffix) => suffix ? html`<div slot="footer" class="ui5-dt-picker-footer ${classMap(context.classes.footer)}"><${scopeTag("ui5-button", tags, suffix)} id="ok" class="ui5-dt-picker-action" design="Emphasized" ?disabled="${context._submitDisabled}" @click="${context._submitClick}">${ifDefined(context.btnOKLabel)}</${scopeTag("ui5-button", tags, suffix)}><${scopeTag("ui5-button", tags, suffix)} id="cancel" class="ui5-dt-picker-action" design="Transparent" @click="${context._cancelClick}">${ifDefined(context.btnCancelLabel)}</${scopeTag("ui5-button", tags, suffix)}></div>` : html`<div slot="footer" class="ui5-dt-picker-footer ${classMap(context.classes.footer)}"><ui5-button id="ok" class="ui5-dt-picker-action" design="Emphasized" ?disabled="${context._submitDisabled}" @click="${context._submitClick}">${ifDefined(context.btnOKLabel)}</ui5-button><ui5-button id="cancel" class="ui5-dt-picker-action" design="Transparent" @click="${context._cancelClick}">${ifDefined(context.btnCancelLabel)}</ui5-button></div>`;


export default block0;