import"@lit-labs/virtualizer";import{LitElement as e,html as t,css as i}from"lit";import{classMap as l}from"lit/directives/class-map.js";import{createRef as s,ref as a}from"lit/directives/ref.js";import{iconRemixSearchLine as n,iconRemixCloseFill as d,iconRemixEditFill as o,iconRemixCheckFill as r,iconRemixDeleteBin_5Fill as c,iconRemixFileCopyLine as m,iconRemixAddLine as h}from"./assets/cc-remix.icons.js";import{LostFocusController as p}from"./controllers/lost-focus-controller.js";import{copyToClipboard as u}from"./lib/clipboard.js";import{fakeString as f}from"./lib/fake-strings.js";import{focusBySelector as b}from"./lib/focus-helper.js";import{formSubmit as g}from"./lib/form/form-submit-directive.js";import{random as v}from"./lib/utils.js";import{skeletonStyles as y}from"./styles/skeleton.js";import{i18n as $}from"./translation.js";import"./cc-button.js";import"./cc-input-text.js";import"./cc-notice.js";import{CcKvHashLoadMoreEvent as x,CcKvHashExplorerStateChangeEvent as _,CcKvHashElementUpdateEvent as k,CcKvHashElementDeleteEvent as w,CcKvHashFilterChangeEvent as E,CcKvHashElementAddEvent as F}from"./components/cc-kv-hash-explorer/cc-kv-hash-explorer.events.js";const C=Array(5).fill(0).map((()=>({state:{type:"idle",field:f(v(5,10)),value:f(v(10,20))},skeleton:!0})));class j extends e{static get properties(){return{disabled:{type:Boolean},state:{type:Object}}}constructor(){super(),this.disabled=!1,this.state={type:"loading"},this._addFormRef=s(),this._editElementValueRef=s(),this._elementsRef=s(),new p(this,".element",(({suggestedElement:e})=>{b(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._onStartEdit=this._onStartEdit.bind(this),this._onCancelEdit=this._onCancelEdit.bind(this),this._onUpdate=this._onUpdate.bind(this),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.field.focus()}_onVisibilityChanged(e){"loaded"===this.state.type&&this.state.elements.length>0&&e.last>=this.state.elements.length-5&&this.dispatchEvent(new x)}async _onStartEdit(e){if("loading"===this.state.type)return;const t=e.target.dataset.field;this.state={...this.state,elements:this.state.elements.map((e=>"editing"===e.type?{type:"idle",field:e.field,value:e.value}:e.field===t?{type:"editing",field:e.field,value:e.value}:e))},this.dispatchEvent(new _(this.state)),await this._elementsRef.value.layoutComplete,this._editElementValueRef.value.focus()}_onCancelEdit(e){if("loading"===this.state.type)return;const t=e.target.dataset.field;this.state={...this.state,elements:this.state.elements.map((e=>e.field===t?{type:"idle",field:e.field,value:e.value}:e))},this.dispatchEvent(new _(this.state))}_onUpdate(e){if("loading"===this.state.type)return;const t=e.target.dataset.field;this.dispatchEvent(new k({field:t,value:this._editElementValueRef.value.value}))}_onDeleteElement(e){if("loading"===this.state.type)return;const t=e.target.dataset.field;this.dispatchEvent(new w(t))}_onCopyKeyButtonClick(e){u(e.target.dataset.text)}_onFilterFormSubmit(e){"loading"!==this.state.type&&this.dispatchEvent(new E(e.pattern))}_onAddFormSubmit(e){"loading"!==this.state.type&&this.dispatchEvent(new F({field:e.field,value:e.value}))}render(){const e="loading"===this.state.type,i="filtering"===this.state.type,l="loaded"===this.state.type&&0===this.state.elements.length,s=this._getElements();return t`
      <div class="wrapper">
        <form class="top-bar" ${g(this._onFilterFormSubmit)}>
          <cc-input-text
            name="pattern"
            inline
            label=${$("cc-kv-hash-explorer.filter")}
            ?disabled=${this.disabled}
            ?readonly=${e||i}
          ></cc-input-text>
          <cc-button
            type="submit"
            .icon=${n}
            hide-text
            outlined
            ?disabled=${this.disabled||e}
            ?waiting=${i}
          >
            ${$("cc-kv-hash-explorer.filter.apply")}
          </cc-button>
        </form>

        ${l?t`
              <div class="no-results">
                <cc-notice intent="info" message="${$("cc-kv-hash-explorer.no-results")}"></cc-notice>
              </div>
            `:""}
        ${l?"":t`
              <div class="header">
                <div>${$("cc-kv-hash-explorer.header.field")}</div>
                <div>${$("cc-kv-hash-explorer.header.value")}</div>
              </div>
              <lit-virtualizer
                ${a(this._elementsRef)}
                class="elements"
                ?scroller=${!0}
                .items=${s}
                .keyFunction=${this._elementRender.key}
                .renderItem=${this._elementRender.item}
                @visibilityChanged=${this._onVisibilityChanged}
              ></lit-virtualizer>
            `}
        ${this._renderAddForm()}
      </div>
    `}_renderElement(e,i,s){const n="editing"===e.type||"updating"===e.type;return t`
      <div class="element">
        <span class=${l({"element-field":!0,skeleton:i})}>${e.field}</span>
        <div class="element-value">
          ${n?t`
                <cc-input-text
                  class="element-value-input"
                  ${a(this._editElementValueRef)}
                  label=${$("cc-kv-hash-explorer.element.edit.value-input")}
                  .value=${e.value}
                  data-field=${e.field}
                  hidden-label
                  multi
                  ?skeleton=${i}
                  ?readonly=${"updating"===e.type}
                  @cc-request-submit=${this._onUpdate}
                ></cc-input-text>
              `:""}
          ${n?"":t`<span class="element-value-span ${l({skeleton:i})}">${e.value}</span>`}

          <div class="element-value-buttons">${this._renderElementButtons(e,i,n,s)}</div>
        </div>
      </div>
    `}_renderElementButtons(e,i,l,s){const a=l?{icon:d,class:"edit-cancel-button",onClick:this._onCancelEdit,label:$("cc-kv-hash-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-hash-explorer.element.edit.start",{index:s+1}),outlined:!0,primary:!0,danger:!1,waiting:!1,disabled:"deleting"===e.type},n=l?{icon:r,class:"edit-validate-button",onClick:this._onUpdate,label:$("cc-kv-hash-explorer.element.edit.save"),outlined:!1,primary:!0,danger:!1,waiting:"updating"===e.type,disabled:!1}:{icon:c,class:"delete-button",onClick:this._onDeleteElement,label:$("cc-kv-hash-explorer.element.delete",{index:s}),outlined:!0,primary:!1,danger:!0,waiting:"deleting"===e.type,disabled:!1};return t`
      <cc-button
        class=${a.class}
        .icon=${a.icon}
        a11y-name=${a.label}
        data-field=${e.field}
        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
        class=${n.class}
        .icon=${n.icon}
        a11y-name=${n.label}
        data-field=${e.field}
        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>
      <cc-button
        .icon=${m}
        outlined
        hide-text
        data-text=${e.value}
        ?skeleton=${i}
        ?disabled=${this.disabled}
        @cc-click=${this._onCopyKeyButtonClick}
        >${$("cc-kv-hash-explorer.element.copy",{index:s})}</cc-button
      >
    `}_renderAddForm(){const e="loading"===this.state.type,i="filtering"===this.state.type,l="loading"!==this.state.type&&"adding"===this.state.addForm.type,s=e||i||l;return t`
      <form class="add-form" ${a(this._addFormRef)} ${g(this._onAddFormSubmit)}>
        <cc-input-text
          name="field"
          label=${$("cc-kv-hash-explorer.add-form.element-field")}
          ?readonly=${s}
          ?disabled=${this.disabled}
          inline
        ></cc-input-text>
        <cc-input-text
          name="value"
          label=${$("cc-kv-hash-explorer.add-form.element-value")}
          ?readonly=${s}
          ?disabled=${this.disabled}
          inline
          multi
        ></cc-input-text>
        <cc-button
          type="submit"
          a11y-name=${$("cc-kv-hash-explorer.add-form.submit.a11y")}
          .icon=${h}
          ?waiting=${l}
          ?disabled=${e||i||this.disabled}
          >${$("cc-kv-hash-explorer.add-form.submit")}</cc-button
        >
      </form>
    `}_getElements(){switch(this.state.type){case"loading":case"filtering":return C;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}))),...C]}}static get styles(){return[y,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-auto-columns: 1fr auto;
          grid-auto-flow: column;
          padding: 0.5em;
        }

        .elements {
          flex: 1;
        }

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

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

        .element-field,
        .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-hash-explorer-beta",j);export{j as CcKvHashExplorer};
//# sourceMappingURL=cc-kv-hash-explorer.js.map
