import"@lit-labs/virtualizer";import{LitElement as t,html as e,css as i}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{createRef as s,ref as o}from"lit/directives/ref.js";import{iconRemixAlertFill as n,iconRemixHashtag as c}from"./assets/cc-remix.icons.js";import{isStringBlank as l,isStringEmpty as a}from"./lib/utils.js";import{accessibilityStyles as m}from"./styles/accessibility.js";import{i18n as d}from"./translation.js";import"./cc-icon.js";import{CcKvTerminalStateChangeEvent as p,CcKvCommandExecuteEvent as h}from"./components/cc-kv-terminal/cc-kv-terminal.events.js";class u extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"idle",history:[]},this._cmdHistory=[],this._cmdHistoryIndex=null,this._promptRef=s(),this._historyRef=s(),this._scrollerRef=s(),this._elementRender={key:t=>t.id,item:this._renderItem.bind(this)}}_pushCommandToHistory(t){0!==this._cmdHistory.length&&this._cmdHistory[this._cmdHistory.length-1]===t||this._cmdHistory.push(t)}_getItems(){const t=[];return this.state.history.forEach(((e,i)=>{const r=`cmd/${i}`,s=e.result.length;t.push({id:r,type:"commandLine",line:e.commandLine,hasResult:s>0}),e.result.forEach(((i,o)=>{t.push({id:`${r}/result/${o}`,type:"resultLine",line:i,success:e.success,last:o===s-1})}))})),t}async _scrollToBottom(){this._scrollerRef.value.scrollTop=this._scrollerRef.value.scrollHeight,await(this._historyRef.value?.layoutComplete),this._scrollerRef.value.scrollTop=this._scrollerRef.value.scrollHeight}_onShellPromptKeyDown(t){t.stopPropagation();const e="running"===this.state.type;if("Enter"!==t.key||e)if("ArrowUp"===t.key){if(t.preventDefault(),0===this._cmdHistory.length)return;null==this._cmdHistoryIndex?this._cmdHistoryIndex=this._cmdHistory.length-1:this._cmdHistoryIndex=Math.max(this._cmdHistoryIndex-1,0),this._cmdHistoryIndex>=0&&(this._promptRef.value.value=this._cmdHistory[this._cmdHistoryIndex])}else"ArrowDown"===t.key&&(t.preventDefault(),null!=this._cmdHistoryIndex&&(this._cmdHistoryIndex++,this._cmdHistoryIndex<this._cmdHistory.length?this._promptRef.value.value=this._cmdHistory[this._cmdHistoryIndex]:(this._cmdHistoryIndex=null,this._promptRef.value.value="")));else{t.preventDefault(),this._cmdHistoryIndex=null;const e=t.target.value.trim();l(e)?(this.state={...this.state,history:[...this.state.history,{commandLine:e,result:[],success:!0}]},this.dispatchEvent(new p(this.state)),t.target.value=""):"clear"===e.toLowerCase()?(this._pushCommandToHistory("clear"),this.state={...this.state,history:[]},this.dispatchEvent(new p(this.state)),t.target.value=""):(this._pushCommandToHistory(e),this.dispatchEvent(new h(e)),t.target.value="")}this._scrollerRef.value.scrollTop=this._scrollerRef.value.scrollHeight}_onContentMouseUp(t){t.target!==this._promptRef.value&&setTimeout((()=>{a(document.getSelection()?.toString())&&this._promptRef.value?.focus({preventScroll:!0})}),0)}async updated(t){if(t.has("state")&&"idle"===this.state.type)try{await this._scrollToBottom(),await this._scrollToBottom()}catch(t){if("disconnected"!==t)throw t}}render(){const t="running"===this.state.type,i="running"===this.state.type?this.state.commandLine:"";return e`
      <div class="wrapper" @mouseup=${this._onContentMouseUp} @keydown=${this._onShellPromptKeyDown}>
        <div class="header">
          <div>${d("cc-kv-terminal.header")}</div>
          <div class="header-warning">
            <cc-icon .icon=${n} a11y-name="${d("cc-notice.icon-alt.warning")}"></cc-icon>
            ${d("cc-kv-terminal.warning")}
          </div>
        </div>
        <div class="scroller" ${o(this._scrollerRef)}>
          <lit-virtualizer
            ${o(this._historyRef)}
            aria-live="polite"
            aria-atomic="true"
            .items=${this._getItems()}
            .keyFunction=${this._elementRender.key}
            .renderItem=${this._elementRender.item}
          ></lit-virtualizer>
          <div class="prompt">
            <cc-icon .icon=${c}></cc-icon>
            <label class="visually-hidden" for="prompt">${d("cc-kv-terminal.shell.prompt")}</label>
            <input
              ${o(this._promptRef)}
              id="prompt"
              type="text"
              autocomplete="false"
              spellcheck="false"
              .value=${i}
              ?readonly=${t}
            />
          </div>
          ${t?e`<div><span class="caret-blink">&nbsp;</span></div>`:""}
        </div>
      </div>
    `}_renderItem(t){switch(t.type){case"commandLine":return e`<div class="command ${r({empty:!t.hasResult})}">
          <cc-icon .icon=${c}></cc-icon>${t.line}
        </div>`;case"resultLine":return e`<div class="result ${r({error:!t.success,last:t.last})}">${t.line}</div>`}}static get styles(){return[m,i`
        :host {
          --cc-kv-terminal-color-background: #011627;
          --cc-kv-terminal-color-foreground: #d6deeb;
          --cc-kv-terminal-color-foreground-success: #82aaff;
          --cc-kv-terminal-color-foreground-error: #ef5350;

          display: block;
        }

        .wrapper {
          background-color: var(--cc-kv-terminal-color-background);
          color: var(--cc-kv-terminal-color-foreground);
          display: grid;
          font-family: var(--cc-ff-monospace, monospace);
          font-size: 0.75em;
          grid-template-rows: auto 1fr;
          height: 100%;
        }

        .wrapper:focus-within {
          border-radius: var(--cc-border-radius-small, 0.15em);
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .header {
          align-items: center;
          border-bottom: 1px solid var(--cc-color-border-neutral-strong);
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
          justify-content: space-between;
          padding: 1em;
        }

        .header-warning {
          --cc-icon-color: var(--cc-color-text-warning);

          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .scroller {
          overflow: auto;
          padding: 0.5em;
        }

        .command {
          align-items: center;
          display: flex;
          font-weight: bold;
          gap: 0.2em;
          padding-bottom: 0.2em;
        }

        cc-icon {
          min-height: 1.2em;
          min-width: 1.2em;
        }

        .result {
          color: var(--cc-kv-terminal-color-foreground-success);
          white-space: pre-wrap;
        }

        .result.error {
          color: var(--cc-kv-terminal-color-foreground-error);
        }

        .result.last,
        .command.empty {
          padding-bottom: 0.5em;
        }

        .prompt {
          align-items: center;
          display: flex;
          gap: 0.2em;
          position: relative;
        }

        .prompt input {
          -webkit-appearance: none;
          background: none;
          border: none;
          box-sizing: border-box;
          color: inherit;
          display: block;
          flex: 1;
          font-family: inherit;
          font-size: unset;
          margin: 0;
          padding: 0;
        }

        .prompt input:focus,
        .prompt input:active {
          outline: 0;
        }

        .caret-blink {
          animation: blink 0.75s step-end infinite;
        }

        @keyframes blink {
          0%,
          100% {
            background-color: transparent;
          }

          50% {
            background-color: var(--cc-kv-terminal-color-foreground);
          }
        }
      `]}}window.customElements.define("cc-kv-terminal-beta",u);export{u as CcKvTerminal};
//# sourceMappingURL=cc-kv-terminal.js.map
