import{LitElement as e,html as t,css as a}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{iconCleverRam as o}from"./assets/cc-clever.icons.js";import{iconRemixCpuLine as c,iconRemixDatabase_2Fill as s}from"./assets/cc-remix.icons.js";import{skeletonStyles as n}from"./styles/skeleton.js";import{i18n as i}from"./translation.js";import"./cc-block.js";import"./cc-icon.js";import"./cc-notice.js";const l={cpus:c,vcpus:c,disk:s,memory:o,ram:o},d=["cpus","vcpus","memory","disk"],u=[{name:"??????",value:"????????"},{name:"????",value:"??"},{name:"?????",value:"????"},{name:"???????",value:"????????"}];class m extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}_getFeatureName(e,t){return"disk"===e?i("cc-addon-features.feature-name.disk"):"nodes"===e?i("cc-addon-features.feature-name.nodes"):"memory"===e?i("cc-addon-features.feature-name.memory"):t}_getFeatureValue(e,t){return"dedicated"===e?i("cc-addon-features.feature-value.dedicated"):"no"===e?i("cc-addon-features.feature-value.no"):"yes"===e?i("cc-addon-features.feature-value.yes"):t}_sortFeatures(e){const t=e.slice(0);return t.sort(((e,t)=>{const a=d.indexOf(e.name.toLowerCase())+1||d.length+1,r=d.indexOf(t.name.toLowerCase())+1||d.length+1;return String(a).localeCompare(String(r),void 0,{numeric:!0})})),t}render(){const e="loading"===this.state.type,a=("loaded"===this.state.type?this.state.features:u).map((e=>{const t=e.name.toLowerCase(),a=e.value.toLowerCase();return{...e,icon:l[t],name:this._getFeatureName(t,e.name),value:this._getFeatureValue(a,e.value)}})),o=this._sortFeatures(a),c="loaded"===this.state.type||e;return t`
      <cc-block>
        <div slot="header-title">${i("cc-addon-features.title")}</div>

        <div slot="content">${i("cc-addon-features.details")}</div>

        ${"error"===this.state.type?t`
              <cc-notice
                slot="content"
                intent="warning"
                message="${i("cc-addon-features.loading-error")}"
              ></cc-notice>
            `:""}
        ${c?t`
              <div slot="content" class="feature-list">
                ${o.map((a=>t`
                    <div class="feature ${r({skeleton:e})}">
                      ${null!=a.icon?t`
                            <div class="feature-icon">
                              <cc-icon size="lg" class="feature-icon_img" .icon="${a.icon}"></cc-icon>
                            </div>
                          `:""}
                      <div class="feature-name">${a.name}</div>
                      <div class="feature-value">${a.value}</div>
                    </div>
                  `))}
              </div>
            `:""}
      </cc-block>
    `}static get styles(){return[n,a`
        :host {
          display: block;
        }

        .feature-list {
          --bdw: 2px;
          --color: var(--cc-color-bg-primary);
          --padding: 0.6em;

          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        .feature {
          background-color: var(--color);
          border: var(--bdw) solid var(--color);
          border-radius: calc(2 * var(--bdw));
          display: flex;
          flex-wrap: wrap;
        }

        .feature-icon {
          align-items: center;
          display: inline-flex;
          margin-inline-start: var(--padding);
          width: 1.3em;
        }

        .feature-icon_img {
          --cc-icon-color: var(--cc-color-text-inverted);
        }

        .feature-name,
        .feature-value {
          box-sizing: border-box;
          flex: 1 1 auto;
          font-weight: bold;
          padding: calc(var(--padding) / 2) var(--padding);
          text-align: center;
        }

        .feature-name {
          color: var(--cc-color-text-inverted, #fff);
        }

        .skeleton .feature-name {
          color: var(--color);
        }

        .feature-value {
          background-color: var(--cc-color-bg-default, #fff);
          border-radius: var(--bdw);
          color: var(--color);
        }

        .skeleton .feature-value {
          color: #fff;
        }
      `]}}window.customElements.define("cc-addon-features",m);export{m as CcAddonFeatures};
//# sourceMappingURL=cc-addon-features.js.map
