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 a,iconRemixCloseFill as d,iconRemixEditFill as o,iconRemixCheckFill as r,iconRemixFileCopyLine as c,iconRemixAddLine as m}from"./assets/cc-remix.icons.js";import{copyToClipboard as p}from"./lib/clipboard.js";import{fakeString as u}from"./lib/fake-strings.js";import{formSubmit as h}from"./lib/form/form-submit-directive.js";import{random as b,isStringEmpty as v}from"./lib/utils.js";import{skeletonStyles as g}from"./styles/skeleton.js";import{i18n as $}from"./translation.js";import"./cc-button.js";import"./cc-input-text.js";import"./cc-notice.js";import"./cc-select.js";import{CcKvListLoadMoreEvent as f,CcKvListExplorerStateChangeEvent as x,CcKvListElementUpdateEvent as y,CcKvListFilterChangeEvent as _,CcKvListElementAddEvent as k}from"./components/cc-kv-list-explorer/cc-kv-list-explorer.events.js";const w=Array(5).fill(0).map(((e,t)=>({state:{type:"idle",index:t,value:u(b(10,20))},skeleton:!0})));class F extends e{static get properties(){return{disabled:{type:Boolean},state:{type:Object}}}constructor(){super(),this.disabled=!1,this.state={type:"loading"},this._addFormPosition="tail",this._addFormRef=l(),this._editElementValueRef=l(),this._elementsRef=l(),this._elementRender={key:e=>e.state.value,item:(e,t)=>this._renderElement(e.state,e.skeleton,t)},this._onStartEdit=this._onStartEdit.bind(this),this._onCancelEdit=this._onCancelEdit.bind(this),this._onUpdate=this._onUpdate.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.value.focus()}_getElements(){switch(this.state.type){case"loading":case"filtering":return w;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}))),...w]}}_onVisibilityChanged(e){"loaded"===this.state.type&&this.state.elements.length>0&&e.last>=this.state.elements.length-5&&this.dispatchEvent(new f)}async _onStartEdit(e){if("loading"===this.state.type)return;const t=Number(e.target.dataset.index);this.state={...this.state,elements:this.state.elements.map((e=>"editing"===e.type?{type:"idle",index:e.index,value:e.value}:e.index===t?{type:"editing",index:e.index,value:e.value}:e))},this.dispatchEvent(new x(this.state)),await this._elementsRef.value.layoutComplete,this._editElementValueRef.value.focus()}_onCancelEdit(e){if("loading"===this.state.type)return;const t=Number(e.target.dataset.index);this.state={...this.state,elements:this.state.elements.map((e=>e.index===t?{type:"idle",index:e.index,value:e.value}:e))},this.dispatchEvent(new x(this.state))}_onCopyKeyButtonClick(e){p(e.target.dataset.text)}_onUpdate(e){if("loading"===this.state.type)return;const t=Number(e.target.dataset.index);this.dispatchEvent(new y({index:t,value:this._editElementValueRef.value.value}))}_onFilterFormSubmit(e){if("loading"===this.state.type)return;const t=e.pattern,i=v(t)?null:Number(t);this.dispatchEvent(new _(i))}_onAddFormSubmit(e){if("loading"===this.state.type)return;this._addFormPosition=e.position;const t=e.value;this.dispatchEvent(new k({position:this._addFormPosition,value:t}))}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=${$("cc-kv-list-explorer.filter")}
            ?disabled=${this.disabled}
            ?readonly=${e||i}
          ></cc-input-text>
          <cc-button
            type="submit"
            .icon=${a}
            hide-text
            outlined
            ?disabled=${this.disabled||e}
            ?waiting=${i}
          >
            ${$("cc-kv-list-explorer.filter.apply")}
          </cc-button>
        </form>

        ${s?t`
              <div class="no-results">
                <cc-notice intent="info" message="${$("cc-kv-list-explorer.no-results")}"></cc-notice>
              </div>
            `:""}
        ${s?"":t`
              <div class="header">
                <div>${$("cc-kv-list-explorer.header.index")}</div>
                <div>${$("cc-kv-list-explorer.header.value")}</div>
              </div>
              <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){const a="editing"===e.type||"updating"===e.type;return t`
      <div class="element">
        <div class=${s({"element-index":!0,skeleton:i})}>${e.index}</div>
        <div class="element-value">
          ${a?t`
                <cc-input-text
                  class="element-value-input"
                  ${n(this._editElementValueRef)}
                  label=${$("cc-kv-list-explorer.element.edit.value-input")}
                  .value=${e.value}
                  data-index=${e.index}
                  hidden-label
                  multi
                  ?skeleton=${i}
                  ?readonly=${"updating"===e.type}
                  @cc-request-submit=${this._onUpdate}
                ></cc-input-text>
              `:""}
          ${a?"":t`<span class="element-value-span ${s({skeleton:i})}">${e.value}</span>`}

          <div class="element-value-buttons">${this._renderElementButtons(e,i,a,l)}</div>
        </div>
      </div>
    `}_renderElementButtons(e,i,s,l){const n=s?{icon:d,class:"edit-cancel-button",onClick:this._onCancelEdit,label:$("cc-kv-list-explorer.element.edit.cancel"),outlined:!0,primary:!1,danger:!1,waiting:!1,disabled:"updating"===e.type}:{icon:o,class:"edit-start-button",onClick:this._onStartEdit,label:$("cc-kv-list-explorer.element.edit.start",{index:l}),outlined:!0,primary:!0,danger:!1,waiting:!1,disabled:!1},a=s?{icon:r,class:"edit-validate-button",onClick:this._onUpdate,label:$("cc-kv-list-explorer.element.edit.save"),outlined:!1,primary:!0,danger:!1,waiting:"updating"===e.type,disabled:!1}:null;return t`
      <cc-button
        class=${n.class}
        .icon=${n.icon}
        a11y-name=${n.label}
        data-index=${e.index}
        hide-text
        ?outlined=${n.outlined}
        ?skeleton=${i}
        ?danger=${n.danger}
        ?primary=${n.primary}
        ?disabled=${n.disabled||this.disabled}
        ?waiting=${n.waiting}
        @cc-click=${n.onClick}
      ></cc-button>
      ${null!=a?t`
            <cc-button
              class=${a.class}
              .icon=${a.icon}
              a11y-name=${a.label}
              data-index=${e.index}
              hide-text
              ?outlined=${a.outlined}
              ?skeleton=${i}
              ?danger=${a.danger}
              ?primary=${a.primary}
              ?disabled=${a.disabled||this.disabled}
              ?waiting=${a.waiting}
              @cc-click=${a.onClick}
            ></cc-button>
          `:""}
      <cc-button
        .icon=${c}
        outlined
        hide-text
        data-text=${e.value}
        ?skeleton=${i}
        ?disabled=${this.disabled}
        @cc-click=${this._onCopyKeyButtonClick}
        >${$("cc-kv-list-explorer.element.copy",{index:l})}</cc-button
      >
    `}_renderAddForm(){const e=[{label:$("cc-kv-list-explorer.add-form.element-position.tail"),value:"tail"},{label:$("cc-kv-list-explorer.add-form.element-position.head"),value:"head"}],i="loading"===this.state.type,s="filtering"===this.state.type,l="loading"!==this.state.type&&"adding"===this.state.addForm.type,a=i||s||l;return t`<form class="add-form" ${n(this._addFormRef)} ${h(this._onAddFormSubmit)}>
      <cc-select
        name="position"
        label=${$("cc-kv-list-explorer.add-form.element-position")}
        .options=${e}
        .value=${this._addFormPosition}
        .resetValue=${this._addFormPosition}
        ?disabled=${this.disabled}
        inline
      ></cc-select>
      <cc-input-text
        name="value"
        label=${$("cc-kv-list-explorer.add-form.element-value")}
        ?readonly=${a}
        ?disabled=${this.disabled}
        inline
        multi
      ></cc-input-text>
      <cc-button
        type="submit"
        a11y-name=${$("cc-kv-list-explorer.add-form.submit.a11y")}
        .icon=${m}
        ?waiting=${l}
        ?disabled=${i||s||this.disabled}
        >${$("cc-kv-list-explorer.add-form.submit")}</cc-button
      >
    </form>`}static get styles(){return[g,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,
        .header {
          align-items: center;
          display: grid;
          gap: 0.5em;
          grid-template-columns: 0.25fr 1fr;
          padding: 0.25em 0.5em;
          width: 100%;
        }

        .element-value {
          align-items: center;
          display: grid;
          gap: 0.5em;
          grid-template-columns: 1fr auto;
        }

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

        .header {
          background-color: var(--cc-color-bg-neutral-active, #d9d9d9);
          font-weight: bold;
          padding: 0.5em;
          width: unset;
        }

        .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-input {
          margin: 0.15em 0;
        }

        .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-list-explorer-beta",F);export{F as CcKvListExplorer};
//# sourceMappingURL=cc-kv-list-explorer.js.map
