import{LitElement as e,html as t,css as s}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{iconRemixInformationFill as c}from"./assets/cc-remix.icons.js";import{getAssetUrl as r}from"./lib/assets-url.js";import{getDocUrl as a}from"./lib/dev-hub-url.js";import{skeletonStyles as n}from"./styles/skeleton.js";import{i18n as o}from"./translation.js";import"./cc-block.js";import"./cc-icon.js";import"./cc-link.js";import"./cc-notice.js";const l=r("/logos/elastic.svg"),p=r("/logos/elasticsearch-kibana.svg"),m=r("/logos/elasticsearch-apm.svg"),d=a("/addons/elastic"),h=["elasticsearch","kibana","apm"];class k extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading",links:[{type:"elasticsearch"},{type:"kibana"},{type:"apm"}]}}_getLinkText(e){switch(e){case"elasticsearch":return o("cc-elasticsearch-info.link.elasticsearch");case"kibana":return o("cc-elasticsearch-info.link.kibana");case"apm":return o("cc-elasticsearch-info.link.apm")}}_getLogo(e){switch(e){case"elasticsearch":return l;case"kibana":return p;case"apm":return m}}_getSortedLinks(e){return e.sort(((e,t)=>h.indexOf(e.type)-h.indexOf(t.type)))}render(){const e="loading"===this.state.type;return"error"===this.state.type?t`<cc-notice intent="warning" message="${o("cc-elasticsearch-info.error")}"></cc-notice>`:t`
      <cc-block>
        <div slot="ribbon">${o("cc-elasticsearch-info.info")}</div>
        <div slot="content" class="info-text">${o("cc-elasticsearch-info.text")}</div>

        <div slot="content" class="link-list">${this._renderLinks(this.state.links,e)}</div>

        <div slot="footer-right">
          <cc-link href="${d}" .icon="${c}">
            ${o("cc-elasticsearch-info.documentation.text")}
          </cc-link>
        </div>
      </cc-block>
    `}_renderLinks(e,s){return this._getSortedLinks(e).map((({href:e,type:c})=>t`
        <cc-link href="${e}" image="${this._getLogo(c)}">
          <span class="${i({skeleton:s})}">${this._getLinkText(c)}</span>
        </cc-link>
      `))}static get styles(){return[n,s`
        :host {
          display: block;
        }

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

        cc-link {
          align-items: center;
          display: flex;
        }

        cc-link::part(img) {
          border-radius: var(--cc-border-radius-default, 0.25em);
          height: 1.5em;
          width: 1.5em;
        }

        cc-icon {
          flex: 0 0 auto;
          margin-right: 0.5em;
        }

        /* SKELETON */

        .skeleton {
          background-color: #bbb;
        }
      `]}}window.customElements.define("cc-elasticsearch-info",k);export{k as CcElasticsearchInfo};
//# sourceMappingURL=cc-elasticsearch-info.js.map
