import{LitElement as t,html as e,css as o}from"lit";import{createRef as i,ref as n}from"lit/directives/ref.js";import{iconRemixFlashlightLine as s,iconRemixCalendarScheduleLine as a,iconRemixTimeLine as c,iconRemixArrowDownSLine as r,iconRemixCheckLine as l,iconRemixArrowLeftSLine as p,iconRemixArrowRightSLine as u}from"./assets/cc-remix.icons.js";import{DateFormatter as d}from"./lib/date/date-formatter.js";import{isLive as g,shiftDateRange as m,isRightDateRangeAfterNow as h}from"./lib/date/date-range-utils.js";import{formSubmit as v}from"./lib/form/form-submit-directive.js";import{f}from"./form-utils-4685920e.js";import{i18n as _}from"./translation.js";import"./cc-icon.js";import"./cc-input-date.js";import"./cc-popover.js";import{CcLogsDateRangeSelectionChangeEvent as y}from"./components/cc-logs-date-range-selector/cc-logs-date-range-selector.events.js";import{dateRangeSelectionToDateRange as b}from"./date-range-selection.js";const R=["live","lastHour","last4Hours","today","yesterday","last7Days","custom"];class D extends t{static get properties(){return{disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},timezone:{type:String},value:{type:Object},_customDateRange:{type:Object,state:!0}}}constructor(){super(),this.disabled=!1,this.readonly=!1,this.timezone="UTC",this.value={type:"live"},this._currentDateRange=b(this.value),this._customDateRange=null,this._selectedOption=this._getOption(this.value),this._customDateRangeRefs={since:i(),until:i()},this._optionSelectorRef=i(),this._onCustomDateRangeFormSubmit=this._onCustomDateRangeFormSubmit.bind(this)}getDateRange(){return this._currentDateRange}_getOption(t){return"preset"===t.type?t.preset:t.type}_getOptionIcon(t){return"live"===t?s:"custom"===t?a:c}_applyDateRange(t){this.value=t,this._currentDateRange=b(this.value),this.dispatchEvent(new y({selection:this.value,range:this._currentDateRange}))}_onOptionChange(t){const e=t.target.dataset.option;e!==this._selectedOption?(this._selectedOption=e,"custom"===this._selectedOption?this._customDateRange={since:this._currentDateRange.since,until:g(this._currentDateRange)?(new Date).toISOString():this._currentDateRange.until}:"live"===this._selectedOption?(this._optionSelectorRef.value.close(),this._applyDateRange({type:"live"})):(this._optionSelectorRef.value.close(),this._applyDateRange({type:"preset",preset:this._selectedOption}))):this._optionSelectorRef.value.close()}_onCustomDateRangeFormSubmit(t){this._optionSelectorRef.value.close(),this._applyDateRange({type:"custom",since:t.since,until:t.until})}_onCustomSinceInput(t){this._customDateRange={since:t.detail,until:this._customDateRange.until}}_onCustomUntilInput(t){this._customDateRange={since:this._customDateRange.since,until:t.detail}}_onCustomDateRangeShift(t){this._customDateRangeRefs.since.value.reportInlineValidity()&&this._customDateRangeRefs.until.value.reportInlineValidity()?this._customDateRange=m(this._customDateRange,t.target.dataset.direction):f(this._customDateRangeRefs.since.value.form)}willUpdate(t){t.has("value")&&(this._selectedOption=this._getOption(this.value),"custom"===this.value.type?this._customDateRange={since:this.value.since,until:this.value.until}:this._customDateRange=null,this._currentDateRange=b(this.value))}render(){const t=this._getOption(this.value);return e`
      <div class="wrapper">
        <cc-popover
          ${n(this._optionSelectorRef)}
          .icon=${this._getOptionIcon(t)}
          class="options-popover"
          ?disabled=${this.disabled||this.readonly}
        >
          <div slot="button-content" class="options-popover-trigger">
            <div>${this._renderOptionLabel(t,!0)}</div>
            <cc-icon .icon=${r}></cc-icon>
          </div>
          <div class="options-popover-content">
            <div class="options-popover-content--left">
              ${R.map((t=>{const o=t===this._selectedOption;return e`
                  <button
                    class="option-button"
                    data-option="${t}"
                    data-selected="${o}"
                    @click=${this._onOptionChange}
                  >
                    <cc-icon .icon=${this._getOptionIcon(t)} data-option="${t}"></cc-icon>
                    <span data-option="${t}">${this._renderOptionLabel(t,!1)}</span>
                    ${o?e`<cc-icon
                          class="option-button-current"
                          .icon=${l}
                          data-option="${t}"
                        ></cc-icon>`:""}
                  </button>
                `}))}
            </div>
            ${"custom"===this._selectedOption?e`<div class="options-popover-content--right">${this._renderCustomDateRange()}</div>`:""}
          </div>
        </cc-popover>
      </div>
    `}_renderCustomDateRange(){if(null==this._customDateRange)return null;const t=h(this._customDateRange);return e`
      <form class="custom-date-range" ${v(this._onCustomDateRangeFormSubmit)}>
        <cc-input-date
          ${n(this._customDateRangeRefs.since)}
          label=${"UTC"===this.timezone?_("cc-logs-date-range-selector.custom-date-range.since.utc"):_("cc-logs-date-range-selector.custom-date-range.since.local")}
          name="since"
          required
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          timezone=${this.timezone}
          .max=${this._customDateRange.until}
          .value=${this._customDateRange.since}
          @cc-input=${this._onCustomSinceInput}
        ></cc-input-date>
        <cc-input-date
          ${n(this._customDateRangeRefs.until)}
          label=${"UTC"===this.timezone?_("cc-logs-date-range-selector.custom-date-range.until.utc"):_("cc-logs-date-range-selector.custom-date-range.until.local")}
          name="until"
          required
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          timezone=${this.timezone}
          .min=${this._customDateRange.since}
          .value=${this._customDateRange.until}
          @cc-input=${this._onCustomUntilInput}
        ></cc-input-date>
        <div class="custom-date-range-buttons">
          <cc-button
            .icon=${p}
            hide-text
            a11y-name=${_("cc-logs-date-range-selector.custom-date-range.previous")}
            data-direction="left"
            ?disabled=${this.readonly||this.disabled}
            @cc-click=${this._onCustomDateRangeShift}
          >
          </cc-button>
          <cc-button
            .icon=${u}
            hide-text
            a11y-name=${_("cc-logs-date-range-selector.custom-date-range.next")}
            data-direction="right"
            ?disabled=${this.readonly||this.disabled||t}
            @cc-click=${this._onCustomDateRangeShift}
          >
          </cc-button>
          <cc-button type="submit" ?disabled=${this.readonly||this.disabled} primary>
            ${_("cc-logs-date-range-selector.custom-date-range.apply")}
          </cc-button>
        </div>
      </form>
    `}_renderOptionLabel(t,o){switch(t){case"live":return _("cc-logs-date-range-selector.option.live");case"lastHour":return _("cc-logs-date-range-selector.option.last-hour");case"last4Hours":return _("cc-logs-date-range-selector.option.last-4-hours");case"last7Days":return _("cc-logs-date-range-selector.option.last-7-days");case"today":return _("cc-logs-date-range-selector.option.today");case"yesterday":return _("cc-logs-date-range-selector.option.yesterday");case"custom":if(o){const t=new d("datetime-short",this.timezone),o=`[${t.format(new Date(this._currentDateRange.since))} - ${t.format(new Date(this._currentDateRange.until))}]`;return e`
            <div class="options-popover-trigger--with-detail">
              <span>${_("cc-logs-date-range-selector.option.custom")}</span>
              <span class="date-range">${o}</span>
            </div>
          `}return _("cc-logs-date-range-selector.option.custom")}}static get styles(){return[o`
        :host {
          display: block;
        }

        .wrapper {
          display: flex;
          flex-direction: column;
          gap: 0.5em;
          height: 100%;
        }

        .options-popover {
          --cc-popover-trigger-button-font-weight: normal;
          --cc-popover-trigger-button-text-transform: none;
          --cc-popover-padding: 0;
        }

        .options-popover-trigger {
          align-items: center;
          display: flex;
          font-size: 1.2em;
          gap: 1em;
        }

        .options-popover-trigger div {
          display: flex;
          flex: 1;
          justify-content: start;
        }

        .options-popover-trigger cc-icon {
          transition: transform 0.2s;
        }

        .options-popover[is-open] .options-popover-trigger cc-icon {
          transform: rotate(180deg);
        }

        .options-popover-trigger--with-detail {
          align-items: center;
          display: flex;
          gap: 0.25em;
        }

        .date-range {
          color: var(--cc-color-text-weak, #000);
          font-size: 0.75em;
        }

        .options-popover-content {
          display: flex;
        }

        .options-popover-content--left {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
        }

        .options-popover-content--right {
          align-items: center;
          border-left: 1px solid var(--cc-color-border-neutral, #000);
          display: flex;
          margin-left: 1em;
          padding: 1em;
        }

        .option-button {
          align-items: start;
          background: unset;
          border: none;
          cursor: pointer;
          display: grid;
          font-family: inherit;
          font-size: unset;
          gap: 0.5em;
          grid-template-columns: auto 1fr auto;
          justify-items: start;
          margin: 0;
          padding: 0.5em;
          white-space: nowrap;
        }

        .option-button:focus {
          border-radius: var(--cc-border-radius-small, 0.15em);
          outline: var(--cc-focus-outline, #000 solid 2px);
          z-index: 3;
        }

        .option-button:hover,
        .option-button[data-selected='true'] {
          background-color: var(--cc-color-bg-neutral);
        }

        .option-button[data-selected='false'] {
          padding-right: 1.5em;
        }

        .option-button-current {
          margin-left: 1em;
        }

        .custom-date-range {
          display: flex;
          flex-direction: column;
          gap: 0.75em;
          min-width: max-content;
        }

        .custom-date-range-buttons {
          align-items: center;
          display: grid;
          grid-gap: 0.5em;
          grid-template-columns: auto auto 1fr;
          justify-items: end;
        }
      `]}}window.customElements.define("cc-logs-date-range-selector-beta",D);export{D as CcLogsDateRangeSelector};
//# sourceMappingURL=cc-logs-date-range-selector.js.map
