import"@lit-labs/virtualizer";import{LitElement as e,html as t,css as i}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{createRef as l,ref as n}from"lit/directives/ref.js";import{iconRemixSearchLine as o,iconRemixDeleteBin_5Fill as r,iconRemixFileCopyLine as a,iconRemixAddLine as d}from"./assets/cc-remix.icons.js";import{LostFocusController as c}from"./controllers/lost-focus-controller.js";import{copyToClipboard as m}from"./lib/clipboard.js";import{fakeString as p}from"./lib/fake-strings.js";import{focusBySelector as u}from"./lib/focus-helper.js";import{formSubmit as h}from"./lib/form/form-submit-directive.js";import{random as b}from"./lib/utils.js";import{skeletonStyles as f}from"./styles/skeleton.js";import{i18n as g}from"./translation.js";import"./cc-button.js";import"./cc-input-text.js";import"./cc-notice.js";import{CcKvSetLoadMoreEvent as v,CcKvSetElementDeleteEvent as y,CcKvSetFilterChangeEvent as $,CcKvSetElementAddEvent as x}from"./components/cc-kv-set-explorer/cc-kv-set-explorer.events.js";const k=Array(5).fill(0).map((()=>({state:{type:"idle",value:p(b(10,20))},skeleton:!0})));class _ extends e{static get properties(){return{disabled:{type:Boolean},state:{type:Object}}}constructor(){super(),this.disabled=!1,this.state={type:"loading"},this._addFormRef=l(),this._elementsRef=l(),new c(this,".element",(({suggestedElement:e})=>{u(e,".delete-button")}),(async()=>await(this._elementsRef.value?.layoutComplete))),this._elementRender={key:e=>e.state.value,item:(e,t)=>this._renderElement(e.state,e.skeleton,t)},this._onDeleteElement=this._onDeleteElement.bind(this),this._onAddFormSubmit=this._onAddFormSubmit.bind(this),this._onFilterFormSubmit=this._onFilterFormSubmit.bind(this)}resetAddForm(e=!0){this._addFormRef.value.reset(),e&&this._addFormRef.value.element.focus()}_getElements(){switch(this.state.type){case"loading":case"filtering":return k;case"loaded":return this.state.elements.map((e=>({state:e,skeleton:!1})));case"loading-more":return[...this.state.elements.map((e=>({state:e,skeleton:!1}))),...k]}}_onVisibilityChanged(e){"loaded"===this.state.type&&this.state.elements.length>0&&e.last>=this.state.elements.length-5&&this.dispatchEvent(new v)}_onDeleteElement(e){if("loading"===this.state.type)return;const t=e.target.dataset.element;this.dispatchEvent(new y(t))}_onFilterFormSubmit(e){"loading"!==this.state.type&&this.dispatchEvent(new $(e.pattern))}_onAddFormSubmit(e){"loading"!==this.state.type&&this.dispatchEvent(new x(e.element))}_onCopyKeyButtonClick(e){m(e.target.dataset.text)}render(){const e="loading"===this.state.type,i="filtering"===this.state.type,s="loaded"===this.state.type&&0===this.state.elements.length,l=this._getElements();return t`<div class="wrapper">
      <form class="top-bar" ${h(this._onFilterFormSubmit)}>
        <cc-input-text
          name="pattern"
          inline
          label=${g("cc-kv-set-explorer.filter")}
          ?disabled=${this.disabled}
          ?readonly=${e||i}
        ></cc-input-text>
        <cc-button
          type="submit"
          .icon=${o}
          hide-text
          outlined
          ?disabled=${this.disabled||e}
          ?waiting=${i}
        >
          ${g("cc-kv-set-explorer.filter.apply")}
        </cc-button>
      </form>

      ${s?t`
            <div class="no-results">
              <cc-notice intent="info" message="${g("cc-kv-set-explorer.no-results")}"></cc-notice>
            </div>
          `:""}
      ${s?"":t`
            <lit-virtualizer
              ${n(this._elementsRef)}
              class="elements"
              ?scroller=${!0}
              .items=${l}
              .keyFunction=${this._elementRender.key}
              .renderItem=${this._elementRender.item}
              @visibilityChanged=${this._onVisibilityChanged}
            ></lit-virtualizer>
          `}
      ${this._renderAddForm()}
    </div>`}_renderElement(e,i,l){return t`
      <div class="element">
        <span class="element-value ${s({skeleton:i})}">${e.value}</span>
        <div class="element-value-buttons">
          <cc-button
            class="delete-button"
            .icon=${r}
            a11y-name=${g("cc-kv-set-explorer.element.delete",{index:l})}
            data-element=${e.value}
            hide-text
            outlined
            ?skeleton=${i}
            danger
            ?disabled=${this.disabled}
            ?waiting=${"deleting"===e.type}
            @cc-click=${this._onDeleteElement}
          ></cc-button>
          <cc-button
            .icon=${a}
            outlined
            hide-text
            data-text=${e.value}
            ?skeleton=${i}
            ?disabled=${this.disabled}
            @cc-click=${this._onCopyKeyButtonClick}
            >${g("cc-kv-set-explorer.element.copy",{index:l})}</cc-button
          >
        </div>
      </div>
    `}_renderAddForm(){const e="loading"===this.state.type,i="filtering"===this.state.type,s="loading"!==this.state.type&&"adding"===this.state.addForm.type,l=e||i||s;return t`<form class="add-form" ${n(this._addFormRef)} ${h(this._onAddFormSubmit)}>
      <cc-input-text
        name="element"
        label=${g("cc-kv-set-explorer.add-form.element-value")}
        ?readonly=${l}
        ?disabled=${this.disabled}
        inline
        multi
      ></cc-input-text>
      <cc-button
        type="submit"
        a11y-name=${g("cc-kv-set-explorer.add-form.submit.a11y")}
        .icon=${d}
        ?waiting=${s}
        ?disabled=${e||i||this.disabled}
        >${g("cc-kv-set-explorer.add-form.submit")}</cc-button
      >
    </form>`}static get styles(){return[f,i`
        :host {
          display: block;
        }

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

        .top-bar {
          align-items: center;
          border-bottom: 1px solid var(--cc-color-border-neutral-strong);
          display: grid;
          gap: 0.5em;
          grid-template-columns: 1fr auto;
          padding: 0.5em;
        }

        .elements {
          flex: 1;
        }

        .element {
          align-items: center;
          display: grid;
          gap: 0.5em;
          grid-template-columns: 1fr auto;
          padding: 0.25em 0.5em;
          width: 100%;
        }

        .element-value {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .element:nth-child(odd) {
          background-color: var(--cc-color-bg-neutral, #f5f5f5);
        }

        .element:hover {
          background-color: var(--cc-color-bg-neutral-hovered, #e7e7e7);
        }

        .element-value-buttons {
          display: flex;
          gap: 0.35em;
        }

        .skeleton {
          background-color: #bbb;
          border-color: #777;
          color: transparent;
        }

        .no-results {
          align-items: center;
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: center;
          padding: 0.5em;
        }

        .add-form {
          border-top: 1px solid var(--cc-color-border-neutral-strong);
          display: flex;
          gap: 1em;
          padding: 0.5em;
        }

        .add-form cc-input-text {
          flex: 1;
        }
      `]}}window.customElements.define("cc-kv-set-explorer-beta",_);export{_ as CcKvSetExplorer};
//# sourceMappingURL=cc-kv-set-explorer.js.map
