import{LitElement as t,html as e,css as s}from"lit";import{classMap as n}from"lit/directives/class-map.js";import{iconCleverRunning as i,iconCleverStarting as a}from"./assets/cc-clever.icons.js";import{iconRemixAlertFill as c}from"./assets/cc-remix.icons.js";import{animate as o,QUICK_SHRINK as r}from"./lib/animate.js";import{tileStyles as l,instanceDetailsStyles as d}from"./styles/info-tiles.js";import{waitingStyles as p}from"./styles/waiting.js";import{i18n as u}from"./translation.js";import"./cc-expand.js";import"./cc-icon.js";import"./cc-loader.js";const g={running:i,deploying:a};class m extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"},this._lastRunningCount=null,this._lastDeployingCount=null}_getStatusLabel(t){return"running"===t?u("cc-tile-instances.status.running"):"deploying"===t?u("cc-tile-instances.status.deploying"):void 0}render(){return e`<div class=tile_title>${u("cc-tile-instances.title")}</div>${"error"===this.state.type?e`<div class=tile_message><div class=error-message><cc-icon .icon=${c} a11y-name=${u("cc-tile-instances.error.icon-a11y-name")} class=icon-warning></cc-icon><p>${u("cc-tile-instances.error")}</p></div></div>`:""} ${"loading"===this.state.type?e`<div class=tile_body><cc-loader></cc-loader></div>`:""} ${"loaded"===this.state.type?this._renderLoaded(this.state.running,this.state.deploying):""}`}_renderLoaded(t,s){const n=t.map((t=>t.count)).reduce(((t,e)=>t+e),0),i=s.map((t=>t.count)).reduce(((t,e)=>t+e),0);return 0===n&&0===i?e`<div class=tile_message>${u("cc-tile-instances.empty")}</div>`:(this._lastRunningCount!==n&&this.updateComplete.then((()=>{o(this.shadowRoot,".instances[data-type=running] .count-bubble",r.keyframes,r.options),this._lastRunningCount=n})),this._lastDeployingCount!==i&&this.updateComplete.then((()=>{o(this.shadowRoot,".instances[data-type=deploying] .count-bubble",r.keyframes,r.options),this._lastDeployingCount=i})),e`<div class=tile_body><cc-expand>${this._renderInstances(t,"running")} ${this._renderInstances(s,"deploying")}</cc-expand></div>`)}_renderInstances(t,s){return t.length?e`<div class="${n({"cc-waiting":"deploying"===s})} instances" data-type=${s}><cc-icon class="${s} instances_status-img" .icon=${g[s]}></cc-icon><span class=instances_status>${this._getStatusLabel(s)}</span> ${t.map((({flavorName:t,count:s})=>e`<span class=size-label>${t}<span class=count-bubble>${s}</span></span>`))}</div>`:""}static get styles(){return[l,d,p,s`cc-expand{width:100%}.instances{align-items:center;display:flex;width:100%}.instances[data-type=running]{--cc-icon-color:var(--color-legacy-green);--status-color:var(--color-legacy-green)}.instances[data-type=deploying]{--cc-icon-color:var(--color-legacy-blue-icon);--status-color:var(--color-legacy-blue)}.instances_status-img{--cc-icon-size:1.75em}.instances_status{color:var(--status-color,#000);flex:1 1 0;font-size:1.2em;margin-left:.25em}.size-label{margin:var(--bubble-r);position:relative}.count-bubble{background-color:var(--status-color,#000);bottom:calc(var(--bubble-d)/ -2);position:absolute;right:calc(var(--bubble-d)/ -2)}.error-message{display:grid;gap:.75em;grid-template-columns:min-content 1fr;text-align:left}.error-message p{margin:0}.icon-warning{align-self:center;color:var(--cc-color-text-warning);--cc-icon-size:1.25em}`]}}window.customElements.define("cc-tile-instances",m);export{m as CcTileInstances};
//# sourceMappingURL=cc-tile-instances.js.map
