import{LitElement as e,html as t,css as n}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{LostFocusController as a}from"./controllers/lost-focus-controller.js";import{accessibilityStyles as r}from"./styles/accessibility.js";import{skeletonStyles as d}from"./styles/skeleton.js";import{i18n as s}from"./translation.js";import"./cc-button.js";import"./cc-clipboard.js";import"./cc-input-text.js";import{CcNgEnable as o,CcNgDisable as i}from"./components/cc-addon-credentials-content/cc-addon-credentials-content.events.js";const l=new Set(["user","api-url","port","host","tenant","api-key","direct-host","direct-port","database-name","cluster-full-name","api-client-user","initial-user","open-api-url"]),u=new Set(["password","initial-password","direct-uri","uri","api-password","token","api-client-secret"]);class p extends e{static get properties(){return{credentials:{type:Array,attribute:"credentials"},skeleton:{type:Boolean}}}constructor(){super(),this.credentials=[],this.skeleton=!1,new a(this,".ng-btn",(({suggestedElement:e})=>{null!=e&&e instanceof HTMLElement&&e.focus()}))}_getLabelFromCode(e,t){switch(e){case"api-client-secret":return s("cc-addon-credentials-content.code.api-client-secret");case"api-client-user":return s("cc-addon-credentials-content.code.api-client-user");case"api-key":return s("cc-addon-credentials-content.code.api-key");case"api-password":return s("cc-addon-credentials-content.code.api-password");case"api-url":return s("cc-addon-credentials-content.code.api-url");case"cluster-full-name":return s("cc-addon-credentials-content.code.cluster-full-name");case"database-name":return s("cc-addon-credentials-content.code.database-name");case"direct-host":return s("cc-addon-credentials-content.code.direct-host");case"direct-port":return s("cc-addon-credentials-content.code.direct-port");case"direct-uri":return s("cc-addon-credentials-content.code.direct-uri");case"host":return s("cc-addon-credentials-content.code.host");case"initial-password":return s("cc-addon-credentials-content.code.initial-password");case"ng":return s("standard"===t?"cc-addon-credentials-content.code.network-group-standard":"cc-addon-credentials-content.code.network-group-multi-instances");case"password":return s("cc-addon-credentials-content.code.password");case"port":return s("cc-addon-credentials-content.code.port");case"tenant":return s("cc-addon-credentials-content.code.tenant");case"token":return s("cc-addon-credentials-content.code.token");case"uri":return s("cc-addon-credentials-content.code.uri");case"user":return s("cc-addon-credentials-content.code.user");case"initial-user":return s("cc-addon-credentials-content.code.initial-user");case"open-api-url":return s("cc-addon-credentials-content.code.open-api-url");default:return e}}_onNgEnable(){this.dispatchEvent(new o)}_onNgDisable(){this.dispatchEvent(new i)}render(){return t`
      <dl>
        ${this.credentials.map((e=>this._renderCredential(e,this.skeleton)))}</div>
      </dl>
    `}_renderCredential(e,n){const a=this._getLabelFromCode(e.code,"ng"===e.code?e.kind:null);return t`
      <div
        class="credential ${c({"credential--align-center":u.has(e.code)})}"
      >
        <dt>${a}</dt>
        <dd>
          ${l.has(e.code)?t`
                <span class="${c({skeleton:n})}">${e.value}</span>
                ${n?"":t`<cc-clipboard .value="${e.value}"></cc-clipboard>`}
              `:""}
          ${u.has(e.code)?t`
                <cc-input-text
                  label="${a}"
                  hidden-label
                  clipboard
                  secret
                  .value="${e.value}"
                  readonly
                  ?skeleton="${n}"
                ></cc-input-text>
              `:""}
          ${"ng"===e.code?this._renderNgCredential(e.value,e.kind,n):""}
        </dd>
      </div>
    `}_renderNgCredential(e,n,a){return"enabled"===e.status||"disabling"===e.status?t`
        <span class="${c({skeleton:a})}">${e.id}</span>
        ${a?"":t`<cc-clipboard .value="${e.id}"></cc-clipboard>`}
        <cc-button
          class="ng-btn"
          link
          @cc-click="${this._onNgDisable}"
          ?skeleton="${a}"
          .waiting="${"disabling"===e.status}"
        >
          ${s("cc-addon-credentials-content.ng.disable")}
          <span class="visually-hidden"
            >${s("standard"===n?"cc-addon-credentials-content.code.network-group-standard":"cc-addon-credentials-content.code.network-group-multi-instances")}</span
          >
        </cc-button>
      `:t`
      <cc-button
        class="ng-btn"
        link
        @cc-click="${this._onNgEnable}"
        ?skeleton="${a}"
        .waiting="${"enabling"===e.status}"
      >
        ${s("standard"===n?"cc-addon-credentials-content.ng.enable-standard":"cc-addon-credentials-content.ng.enable-multi-instances")}
      </cc-button>
    `}static get styles(){return[r,d,n`
        :host {
          container-type: inline-size;
          display: block;
        }

        dl,
        dt,
        dd {
          margin: 0;
          padding: 0;
        }

        .credential {
          align-items: baseline;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
          padding-block: 1em;
        }

        .credential--align-center {
          align-items: center;
        }

        .credential:not(:last-of-type) {
          border-bottom: solid 1px var(--cc-color-border-neutral-weak);
        }

        dt {
          flex: 1 1 33%;
          font-weight: bold;
          max-width: 21em;
        }

        dd {
          align-items: center;
          display: flex;
          flex: 1 1 21em;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        cc-input-text {
          width: min(100%, 21em);
        }

        @container (max-width: 43em) {
          cc-input-text {
            width: 100%;
          }
        }

        .skeleton {
          background-color: #bbb;
        }
      `]}}customElements.define("cc-addon-credentials-content",p);export{p as CcAddonCredentialsContent};
//# sourceMappingURL=cc-addon-credentials-content.js.map
