import{LitElement as t,html as e,css as s}from"lit";import{createRef as i,ref as a}from"lit/directives/ref.js";import{iconRemixSkipDownLine as o,iconRemixSettings_5Line as n,iconRemixPaletteLine as l,iconRemixCalendarScheduleLine as r,iconRemixPantoneLine as c}from"./assets/cc-remix.icons.js";import{ansiPaletteStyle as p}from"./lib/ansi/ansi-palette-style.js";import d from"./lib/ansi/palettes/default.js";import h from"./lib/ansi/palettes/everblush.js";import m from"./lib/ansi/palettes/hyoob.js";import g from"./lib/ansi/palettes/night-owl.js";import u from"./lib/ansi/palettes/one-light.js";import y from"./lib/ansi/palettes/tokyo-night-light.js";import{i18n as b}from"./translation.js";import"./cc-button.js";import"./cc-icon.js";import"./cc-logs.js";import{DATE_DISPLAYS as f,TIMEZONES as $}from"./date-displayer.js";import"./cc-popover.js";import"./cc-select.js";import"./cc-toggle.js";import{CcLogsOptionsChangeEvent as v}from"./components/cc-logs-control/cc-logs-control.events.js";const _={default:p(d),"One Light":p(u),"Tokyo Night Light":p(y),"Night Owl":p(g),Everblush:p(h),Hyoob:p(m)};class w extends t{static get properties(){return{dateDisplay:{type:String,attribute:"date-display"},follow:{type:Boolean},limit:{type:Number},logs:{type:Array},messageFilter:{type:String,attribute:"message-filter"},messageFilterMode:{type:String,attribute:"message-filter-mode"},metadataDisplay:{type:Object,attribute:"metadata-display"},metadataFilter:{type:Array,attribute:"metadata-filter"},metadataRenderers:{type:Object,attribute:"metadata-renderers"},palette:{type:String},stripAnsi:{type:Boolean,attribute:"strip-ansi"},timezone:{type:String},wrapLines:{type:Boolean,attribute:"wrap-lines"}}}constructor(){super(),this.dateDisplay="datetime-iso",this.follow=!1,this.limit=null,this.logs=[],this.messageFilter=null,this.messageFilterMode="loose",this.metadataDisplay={},this.metadataFilter=[],this.metadataRenderers={},this.palette="default",this.stripAnsi=!1,this.timezone="UTC",this.wrapLines=!1,this._logsRef=i(),this._resolvedMetadataRenderers={}}appendLogs(t){this._logsRef.value?.appendLogs(t)}clear(){this._logsRef.value?.clear()}_onScrollToBottomButtonClick(){this._logsRef.value?.scrollToBottom()}_onPaletteChange(t){this.palette=t.detail,this.dispatchEvent(new v({name:"palette",options:this._getOptions()}))}_onStripAnsiChange(t){this.stripAnsi=t.target.checked,this.dispatchEvent(new v({name:"strip-ansi",options:this._getOptions()}))}_onWrapLinesChange(t){this.wrapLines=t.target.checked,this.dispatchEvent(new v({name:"wrap-lines",options:this._getOptions()}))}_onDateDisplayChange(t){this.dateDisplay=t.detail,this.dispatchEvent(new v({name:"date-display",options:this._getOptions()}))}_onTimezoneChange(t){this.timezone=t.detail,this.dispatchEvent(new v({name:"timezone",options:this._getOptions()}))}_onMetadataChange(t){const e=t.target.dataset.name,s=!t.target.checked;this.metadataDisplay={...this.metadataDisplay,[e]:{...this.metadataDisplay[e],hidden:s}},this.dispatchEvent(new v({name:"metadata-display",options:this._getOptions()}))}_resolveMetadataRenderers(t,e){return Object.fromEntries(Object.entries(t).map((([t,s])=>{const i=e[t];return[t,null!=i&&i.hidden?{hidden:!0}:s]})))}_getDateDisplayLabel(t){switch(t){case"datetime-iso":return b("cc-logs-control.date-display.datetime-iso");case"time-iso":return b("cc-logs-control.date-display.time-iso");case"datetime-short":return b("cc-logs-control.date-display.datetime-short");case"time-short":return b("cc-logs-control.date-display.time-short");case"none":return b("cc-logs-control.date-display.none")}}_getTimezoneLabel(t){switch(t){case"UTC":return b("cc-logs-control.timezone.utc");case"local":return b("cc-logs-control.timezone.local")}}_getPaletteLabel(t){return"default"===t?b("cc-logs-control.palette.default"):t}willUpdate(t){(t.has("metadataRenderers")||t.has("metadataDisplay"))&&(this._resolvedMetadataRenderers=this._resolveMetadataRenderers(this.metadataRenderers,this.metadataDisplay))}render(){return e`
      <div class="header">
        <slot name="header"></slot>

        <cc-button
          class="header--scroll"
          .icon=${o}
          a11y-name="${b("cc-logs-control.scroll-to-bottom")}"
          hide-text
          @cc-click=${this._onScrollToBottomButtonClick}
        ></cc-button>

        <cc-popover
          class="header--options"
          .icon=${n}
          a11y-name="${b("cc-logs-control.show-logs-options")}"
          hide-text
          position="bottom-right"
        >
          <div class="options">
            ${this._renderDisplayOptions()} ${this._renderDateOptions()} ${this._renderMetadataOptions()}
          </div>
        </cc-popover>
      </div>

      <div class="center">
        <slot name="left"></slot>
        <cc-logs-beta
          class="logs"
          ${a(this._logsRef)}
          .dateDisplay=${this.dateDisplay}
          ?follow=${this.follow}
          .limit=${this.limit}
          .logs=${this.logs}
          .messageFilter=${this.messageFilter}
          .messageFilterMode=${this.messageFilterMode}
          .metadataFilter=${this.metadataFilter}
          .metadataRenderers=${this._resolvedMetadataRenderers}
          ?strip-ansi=${this.stripAnsi}
          style=${_[this.palette]}
          .timezone=${this.timezone}
          ?wrap-lines=${this.wrapLines}
        ></cc-logs-beta>
      </div>
    `}_renderDisplayOptions(){const t=Object.entries(_).map((([t])=>({label:this._getPaletteLabel(t),value:t})));return e` <div class="options-header">
        <cc-icon .icon=${l} size="lg"></cc-icon>
        <span>${b("cc-logs-control.option-header.display")}</span>
      </div>
      <div class="options-group">
        <cc-select
          label="${b("cc-logs-control.palette")}"
          .options=${t}
          .value=${this.palette}
          @cc-select=${this._onPaletteChange}
        ></cc-select>

        <label for="strip-ansi">
          <input id="strip-ansi" type="checkbox" @change=${this._onStripAnsiChange} .checked=${this.stripAnsi} />
          ${b("cc-logs-control.strip-ansi")}
        </label>

        <label for="wrap-lines">
          <input id="wrap-lines" type="checkbox" @change=${this._onWrapLinesChange} .checked=${this.wrapLines} />
          ${b("cc-logs-control.wrap-lines")}
        </label>
      </div>`}_renderDateOptions(){const t=f.map((t=>({label:this._getDateDisplayLabel(t),value:t}))),s=$.map((t=>({label:this._getTimezoneLabel(t),value:t})));return e`
      <div class="options-header">
        <cc-icon .icon=${r} size="lg"></cc-icon>
        <span>${b("cc-logs-control.option-header.date")}</span>
      </div>
      <div class="options-group">
        <cc-select
          label="${b("cc-logs-control.date-display")}"
          .options=${t}
          .value=${this.dateDisplay}
          @cc-select=${this._onDateDisplayChange}
        ></cc-select>

        <cc-select
          label="${b("cc-logs-control.timezone")}"
          .options=${s}
          .value=${this.timezone}
          @cc-select=${this._onTimezoneChange}
        ></cc-select>
      </div>
    `}_renderMetadataOptions(){const t=Object.entries(this.metadataDisplay??{});return 0===t.length?null:e`
      <div class="options-header">
        <cc-icon .icon=${c} size="lg"></cc-icon>
        <span>${b("cc-logs-control.option-header.metadata")}</span>
      </div>
      <div class="options-group">
        ${t.map((([t,s])=>e`
            <label for="metadata-${t}">
              <input
                id="metadata-${t}"
                type="checkbox"
                data-name="${t}"
                @change=${this._onMetadataChange}
                .checked=${!s.hidden}
              />
              ${s.label}
            </label>
          `))}
      </div>
    `}_getOptions(){const t=Object.fromEntries(Object.entries(this.metadataDisplay).map((([t,e])=>[t,!e.hidden])));return{"date-display":this.dateDisplay,"metadata-display":t,palette:this.palette,timezone:this.timezone,"wrap-lines":this.wrapLines,"strip-ansi":this.stripAnsi}}static get styles(){return[s`
        :host {
          display: grid;
          gap: 0.5em;
          grid-template-rows:
            [header] auto
            [center] 1fr;
        }

        .header {
          align-items: center;
          display: flex;
          gap: 0.35em;
          justify-content: end;
        }

        .center {
          display: flex;
          gap: 0.5em;
          justify-content: stretch;
          min-height: 0;
        }

        .logs {
          flex: 1;
        }

        .options {
          margin: 0.5em 0.75em;
          white-space: nowrap;
        }

        .options-header {
          align-items: center;
          color: var(--cc-color-text-weak, #333);
          display: grid;
          font-weight: bold;
          grid-gap: 0.5em;
          grid-template-columns: auto auto 1fr;
          width: 100%;
        }

        .options-header:not(:first-of-type) {
          margin-top: 1.85em;
        }

        .options-header::after {
          background-color: var(--cc-color-text-weak, #333);
          content: '';
          height: 1px;
        }

        .options-group {
          display: grid;
          grid-template-columns: minmax(max-content, 1fr);
          margin: 1em 0.75em 0.75em;
          row-gap: 0.75em;
        }

        input[type='checkbox'] {
          height: 1em;
          margin: 0;
          width: 1em;
        }

        input[type='checkbox']:focus {
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }
      `]}}window.customElements.define("cc-logs-control-beta",w);export{w as CcLogsControl};
//# sourceMappingURL=cc-logs-control.js.map
