import{LitElement as e,html as t,css as c}from"lit";import{ifDefined as i}from"lit/directives/if-defined.js";import{skeletonStyles as r}from"./styles/skeleton.js";import{i18n as n}from"./translation.js";import"./cc-block.js";import"./cc-input-text.js";import"./cc-notice.js";class s extends e{static get properties(){return{credentials:{type:Array},error:{type:Boolean},image:{type:String},name:{type:String},toggle:{type:String},type:{type:String}}}constructor(){super(),this.credentials=null,this.error=!1,this.image=null,this.name=null,this.toggle="off",this.type=null}_getDescription(e){switch(e){case"apm":return n("cc-addon-credentials.description.apm");case"elasticsearch":return n("cc-addon-credentials.description.elasticsearch");case"kibana":return n("cc-addon-credentials.description.kibana");case"pulsar":return n("cc-addon-credentials.description.pulsar");case"materia-kv":return n("cc-addon-credentials.description.materia-kv")}}_getFieldName(e){switch(e){case"auth-token":return n("cc-addon-credentials.field.auth-token");case"host":return n("cc-addon-credentials.field.host");case"password":return n("cc-addon-credentials.field.password");case"url":return n("cc-addon-credentials.field.url");case"user":return n("cc-addon-credentials.field.user");case"port":return n("cc-addon-credentials.field.port")}}_onToggleChange({detail:e}){this.toggle=e?"open":"close"}render(){return t`
      <cc-block image=${i(this.image??void 0)} toggle=${this.toggle} @cc-toggle=${this._onToggleChange}>
        <div slot="header-title">${n("cc-addon-credentials.title",{name:this.name})}</div>

        ${this.error?"":t`
              <div slot="content">${this._getDescription(this.type)}</div>

              ${null!=this.credentials?t`
                    <div slot="content" class="credential-list">
                      ${this.credentials.map((({type:e,secret:c,value:r})=>t`
                          <cc-input-text
                            readonly
                            clipboard
                            ?secret=${c}
                            ?skeleton=${null==r}
                            value=${i(r)}
                            label=${this._getFieldName(e)}
                          ></cc-input-text>
                        `))}
                    </div>
                  `:""}
            `}
        ${this.error?t`
              <cc-notice
                slot="content"
                intent="warning"
                message="${n("cc-addon-credentials.loading-error")}"
              ></cc-notice>
            `:""}
      </cc-block>
    `}static get styles(){return[r,c`
        :host {
          display: block;
        }

        .credential-list {
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        cc-input-text {
          --cc-input-font-family: var(--cc-ff-monospace, monospace);

          flex: 1 1 18em;
        }

        /* SKELETON */

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