import{LitElement as e,html as a,css as r}from"lit";import{i18n as t}from"./translation.js";import"./cc-env-var-form.js";import"./cc-loader.js";import"./cc-notice.js";class i extends e{static get properties(){return{appName:{type:String,attribute:"app-name"},state:{type:Object},type:{type:String,reflect:!0}}}constructor(){super(),this.appName=null,this.state={type:"loading"},this.type=null}_getLoadingMessage(){const e={appName:this.appName??""};switch(this.type){case"addon":return t("cc-env-var-linked-services.loading.addon",e);case"app":return t("cc-env-var-linked-services.loading.app",e);default:return""}}_getServiceHeading(e){switch(this.type){case"addon":return t("cc-env-var-linked-services.heading.addon",{name:e});case"app":return t("cc-env-var-linked-services.heading.app",{name:e});default:return""}}_getServiceDescription(e){const a={serviceName:e,appName:this.appName??""};switch(this.type){case"addon":return t("cc-env-var-linked-services.description.addon",a);case"app":return t("cc-env-var-linked-services.description.app",a);default:return""}}_getEmptyMessage(){const e={appName:this.appName??""};switch(this.type){case"addon":return t("cc-env-var-linked-services.empty.addon",e);case"app":return t("cc-env-var-linked-services.empty.app",e);default:return""}}_getErrorMessage(){switch(this.type){case"addon":return this.appName?t("cc-env-var-linked-services.error.addon",{appName:this.appName}):t("cc-env-var-linked-services.error.addon.without-app-name");case"app":return this.appName?t("cc-env-var-linked-services.error.app",{appName:this.appName}):t("cc-env-var-linked-services.error.app.without-app-name");default:return""}}render(){if("error"===this.state.type)return a`
        <div class="error">
          <cc-notice intent="warning" .message="${this._getErrorMessage()}"></cc-notice>
        </div>
      `;if("loading"===this.state.type)return a` <div class="loading"><cc-loader></cc-loader><span>${this._getLoadingMessage()}</span></div> `;const e=this.state.services;if(0===e.length)return a` <div class="empty-msg">${this._getEmptyMessage()}</div> `;const r="addon"===this.type?"linked-addon":"linked-app";return a`
      <div class="service-list">
        ${e.map((e=>a`
            <cc-env-var-form
              readonly
              context="${r}"
              resource-id="${e.id}"
              .state=${{type:"loaded",variables:e.variables,validationMode:"simple"}}
              heading=${this._getServiceHeading(e.name)}
            >
              ${this._getServiceDescription(e.name)}
            </cc-env-var-form>
          `))}
      </div>
    `}static get styles(){return[r`
        :host {
          display: block;
        }

        .loading,
        .empty-msg {
          background-color: var(--cc-color-bg-default, #fff);
          border: 1px solid var(--cc-color-border-neutral, #aaa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-sizing: border-box;
          padding: 1em;
        }

        .loading {
          display: flex;
        }

        cc-loader {
          height: 1.5em;
          margin-right: 1em;
          width: 1.5em;
        }

        .service-list {
          display: grid;
          grid-gap: 1em;
        }

        .empty-msg {
          color: var(--cc-color-text-weak);
          font-style: italic;
        }
      `]}}window.customElements.define("cc-env-var-linked-services",i);export{i as CcEnvVarLinkedServices};
//# sourceMappingURL=cc-env-var-linked-services.js.map
