import{LitElement as e,html as t,css as n}from"lit";import{iconRemixCompassDiscoverLine as s,iconRemixPlayCircleLine as c,iconRemixStopCircleLine as i,iconRemixCloseCircleLine as a,iconRemixGhostLine as o,iconRemixCheckboxCircleFill as r,iconRemixErrorWarningFill as l,iconRemixCloseCircleFill as d,iconRemixToolsLine as m}from"./assets/cc-remix.icons.js";import{groupBy as p}from"./lib/utils.js";import{i18n as g}from"./translation.js";import"./cc-datetime-relative.js";import"./cc-icon.js";import"./cc-input-text.js";import"./cc-loader.js";import"./cc-notice.js";import"./cc-toggle.js";import{CcLogsInstancesSelectionChangeEvent as h}from"./components/cc-logs-instances/cc-logs-instances.events.js";const y=(e,t)=>{const n=e.index-t.index;if(0!==n)return n;const s=e.creationDate.getTime()-t.creationDate.getTime();return 0!==s?s:"BUILD"===e.kind?-1:1},u=(e,t)=>e.id.localeCompare(t.id),f=["BOOTING","STARTING","DEPLOYING","READY"],I=["UP","MIGRATION_IN_PROGRESS","TASK_IN_PROGRESS","BUILDING"],_=["QUEUED","WORK_IN_PROGRESS"];class $ extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={state:"loading"}}_isSelected(e){return"loaded"===this.state.state&&null!=this.state.selection&&this.state.selection.includes(e)}_splitGhostInstances(e){return p(e,(e=>e.ghost?"ghostInstances":"realInstances"))}_onInstanceClick(e){if("loaded"===this.state.state){const t=e.target.id;this._isSelected(t)?this.state={...this.state,selection:this.state.selection.filter((e=>e!==t))}:this.state={...this.state,selection:[...this.state.selection??[],t]},this.dispatchEvent(new h(this.state.selection))}}render(){return"error"===this.state.state?t`
        <div class="wrapper wrapper--center">
          <cc-notice intent="warning" message="${g("cc-logs-instances.loading.error")}"></cc-notice>
        </div>
      `:"loading"===this.state.state?t`
        <div class="wrapper wrapper--center">
          <cc-loader a11y-name="${g("cc-logs-instances.loading.loader")}"></cc-loader>
        </div>
      `:"cold"===this.state.mode?this._renderColdMode(this.state.instances):this._renderLiveMode(this.state.instances)}_renderColdMode(e){const{ghostInstances:n,realInstances:s}=this._splitGhostInstances(e);return t`
      <fieldset class="section section--cold">
        ${this._renderHeader({title:g("cc-logs-instances.cold.header")})}
        ${s?.length>0?this._renderInstancesGroupedByDeployment(s):t`<div class="empty">${g("cc-logs-instances.cold.empty")}</div>`}
      </fieldset>
      ${this._renderGhostInstances(n)}
    `}_renderLiveMode(e){const n=[],s=[],c=[],i=[],{ghostInstances:a,realInstances:o}=this._splitGhostInstances(e);return(o||[]).sort(y).forEach((e=>{_.includes(e.deployment.state)?n.push(e):"DELETED"===e.state?i.push(e):"STOPPING"===e.state?c.push(e):s.push(e)})),t`
      ${this._renderDeployingInstances(n)} ${this._renderRunningInstances(s)}
      ${this._renderStoppingInstances(c)} ${this._renderDeletedInstances(i)}
      ${this._renderGhostInstances(a)}
    `}_renderDeployingInstances(e){return 0===e.length?"":t`
      <fieldset class="section section--deploying">
        ${this._renderHeader({title:g("cc-logs-instances.deploying.header"),icon:s,commit:e[0].deployment.commitId})}
        <div class="section-content instances instances--with-state">${this._renderInstances(e,!0)}</div>
      </fieldset>
    `}_renderRunningInstances(e){return 0===e.length?t`
        <fieldset class="section section--running">
          ${this._renderHeader({title:g("cc-logs-instances.running.header"),icon:c})}
          <div class="empty">${g("cc-logs-instances.running.empty")}</div>
        </fieldset>
      `:t`
      <fieldset class="section section--running">
        ${this._renderHeader({title:g("cc-logs-instances.running.header"),icon:c,commit:e[0].deployment.commitId})}
        <div class="section-content instances">${this._renderInstances(e,!1)}</div>
      </fieldset>
    `}_renderStoppingInstances(e){return 0===e.length?"":t`
      <fieldset class="section section--stopping">
        ${this._renderHeader({title:g("cc-logs-instances.stopping.header"),icon:i,commit:e[0].deployment.commitId})}
        <div class="section-content instances">${this._renderInstances(e,!1)}</div>
      </fieldset>
    `}_renderDeletedInstances(e){return 0===e.length?"":t`
      <fieldset class="section section--deleted">
        ${this._renderHeader({title:g("cc-logs-instances.deleted.header"),icon:a})}
        ${this._renderInstancesGroupedByDeployment(e)}
      </fieldset>
    `}_renderGhostInstances(e){return null==e||0===e.length?"":t`
      <fieldset class="section section--ghost">
        ${this._renderHeader({title:g("cc-logs-instances.ghost.header"),icon:o})}

        <div class="section-content">
          <cc-notice intent="info" message="${g("cc-logs-instances.ghost.notice")}"></cc-notice>
          <div class="instances instances--ghost">
            ${e.sort(u).map((e=>t`
                <label class="instance" for="${e.id}">
                  <input
                    type="checkbox"
                    id="${e.id}"
                    .checked=${this._isSelected(e.id)}
                    @change=${this._onInstanceClick}
                  />
                  <span class="instance-id">${e.id}</span>
                </label>
              `))}
          </div>
        </div>
      </fieldset>
    `}_renderHeader({title:e,icon:n,commit:s}){return t`
      <legend class="section-header">
        ${null!=n?t` <cc-icon class="section-header-icon" .icon=${n}></cc-icon> `:""}
        <span class="section-header-title">${e}</span>
        ${null!=s?this._renderCommit(s):""}
      </legend>
    `}_renderInstancesGroupedByDeployment(e){const n=p(e,(e=>e.deployment?.id));return t`
      <div class="section-content deployments">
        ${Object.values(n).map((e=>({deploymentDate:e[0].deployment.creationDate,instances:e}))).sort(((e,t)=>t.deploymentDate-e.deploymentDate)).map((({instances:e})=>t`
              <fieldset class="deployment">
                ${this._renderDeploymentDetails(e[0].deployment)}
                <div class="instances">${this._renderInstances(e,!1)}</div>
              </fieldset>
            `))}
      </div>
    `}_renderInstances(e,t){return e.sort(y).map((e=>this._renderInstance(e,t)))}_renderInstance(e,n){return t`
      <label class="instance" for="${e.id}">
        <input
          type="checkbox"
          id="${e.id}"
          .checked=${this._isSelected(e.id)}
          @change=${this._onInstanceClick}
        />
        <span class="instance-name">${e.name}</span>
      </label>
      ${n?this._renderInstanceState(e):""} ${this._renderInstanceIndex(e)}
    `}_renderDeploymentDetails(e){return t`
      <legend class="deployment-detail">
        <div>${this._renderDeploymentState(e.state)}</div>
        <div>
          ${g("cc-logs-instances.deployment.deployed")}&nbsp;<cc-datetime-relative
            datetime=${e.creationDate.toISOString()}
          ></cc-datetime-relative>
        </div>
        ${this._renderCommit(e.commitId)}
      </legend>
    `}_getDeploymentStateIcon(e){return _.includes(e)?{a11yName:g("cc-logs-instances.deployment.state.wip"),icon:s,class:"deployment-state--wip"}:"SUCCEEDED"===e?{a11yName:g("cc-logs-instances.deployment.state.succeeded"),icon:r,class:"deployment-state--succeeded"}:"FAILED"===e?{a11yName:g("cc-logs-instances.deployment.state.failed"),icon:l,class:"deployment-state--failed"}:"CANCELLED"===e?{a11yName:g("cc-logs-instances.deployment.state.cancelled"),icon:d,class:"deployment-state--cancelled"}:null}_renderDeploymentState(e){const n=this._getDeploymentStateIcon(e);return t`
      <cc-icon .icon=${n.icon} a11y-name="${n.a11yName}" class="deployment-state ${n.class}"></cc-icon>
    `}_getInstanceStateIcon(e){return f.includes(e.state)?{a11yName:g("cc-logs-instances.instance.state.deploying"),icon:s,class:"instance-state--deploying"}:I.includes(e.state)?{a11yName:g("cc-logs-instances.instance.state.running"),icon:c,class:"instance-state--running"}:"STOPPING"===e.state?{a11yName:g("cc-logs-instances.instance.state.stopping"),icon:i,class:"instance-state--stopping"}:"DELETED"===e.state&&"WORK_IN_PROGRESS"===e.deployment.state?{a11yName:g("cc-logs-instances.instance.state.deleted"),icon:a,class:"instance-state--deleted"}:null}_renderInstanceState(e){const n=this._getInstanceStateIcon(e);return null==n?t`<span></span>`:t`
      <cc-icon .icon=${n.icon} a11y-name="${n.a11yName}" class="instance-state ${n.class}"></cc-icon>
    `}_renderCommit(e){return t` <span class="commit" title=${g("cc-logs-instances.commit.title",{commit:e})}>
      ${e.substring(0,7)}
    </span>`}_renderInstanceIndex(e){const n="BUILD"===e.kind?g("cc-logs-instances.instance.build"):g("cc-logs-instances.instance.index",{index:e.index});return t` <span class="instance-index" title=${n}>
      ${"BUILD"===e.kind?t` <cc-icon .icon=${m}></cc-icon> `:""}
      ${"BUILD"!==e.kind?t` ${e.index} `:""}
    </span>`}static get styles(){return[n`
        :host {
          display: flex;
          flex-direction: column;
          overflow: auto;
        }

        /* RESET */

        fieldset {
          border: 0;
          display: flex;
          flex-direction: column;
          margin: 0;
          min-width: 0;
          padding: 0;
        }

        legend {
          display: table;
          float: left;
          margin: 0;
          padding: 0;
        }

        .wrapper {
          padding: 0.5em 0.75em;
        }

        .wrapper.wrapper--center {
          align-items: center;
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: center;
        }

        cc-loader.loading {
          min-height: 20em;
        }

        .section {
          margin-bottom: 1em;
        }

        .section--deploying {
          --section-header-color: var(--cc-color-text-primary);
        }

        .section--running {
          --section-header-color: var(--cc-color-text-success);
        }

        .section--stopping {
          --section-header-color: var(--cc-color-text-warning);
        }

        .section--deleted,
        .section--cold,
        .section--ghost {
          --section-header-color: var(--cc-color-text-weak, #555);
        }

        .section-header {
          align-items: center;
          background-color: var(--cc-color-bg-neutral, #eee);
          color: var(--cc-color-text-weak, #555);
          display: flex;
          gap: 0.5em;
          margin-bottom: 0.5em;
          padding: 0.5em 0.75em;
        }

        .section-header-icon {
          height: 1.5em;
          width: 1.5em;

          --cc-icon-color: var(--section-header-color);
        }

        .section-header-title {
          flex: 1;
          font-size: 1em;
          font-weight: bold;
        }

        .commit {
          align-items: center;
          background-color: var(--cc-color-bg-neutral-readonly, #aaa);
          border: 1px solid var(--cc-color-border-neutral, #aaa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          color: var(--cc-color-text-weak, #555);
          display: flex;
          font-family: var(--cc-ff-monospace, monospace);
          font-size: 0.7em;
          padding: 0.2em;
        }

        .section-content {
          display: flex;
          flex-direction: column;
          padding: 0.25em 0.75em 0.25em 1em;
        }

        .instances {
          align-items: center;
          display: grid;
          gap: 0.5em;
          grid-template-columns: max-content max-content;
        }

        .instances.instances--with-state {
          grid-template-columns: max-content max-content max-content;
        }

        .instances.instances--ghost {
          display: flex;
          flex-direction: column;
          margin-top: 1em;
        }

        .instance {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .instance-id {
          line-height: 1em;
          overflow-wrap: break-word;
        }

        .instance-index {
          align-items: center;
          background-color: var(--cc-color-bg-neutral-readonly, #aaa);
          border: 1px solid var(--cc-color-border-neutral, #aaa);
          border-radius: 100%;
          color: var(--cc-color-text-weak, #555);
          display: flex;
          font-family: var(--cc-ff-monospace, monospace);
          font-size: 0.7em;
          height: 1em;
          justify-content: center;
          padding: 0.2em;
          width: 1em;
        }

        .instance-state {
          --cc-icon-size: 1.2em;
        }

        .deployments {
          gap: 1em;
        }

        .deployment {
          display: flex;
          flex-direction: column;
          gap: 0.5em;
        }

        .deployment-detail {
          align-items: center;
          color: var(--cc-color-text-weak, #555);
          display: grid;
          gap: 0.5em;
          grid-template-columns: auto 1fr auto;
        }

        .deployment .instances {
          padding-left: 1.5em;
        }

        cc-icon.deployment-state {
          display: inline-flex;
          flex: auto 0 0;
          height: 1.2em;
          width: 1.2em;
        }

        .instance-state--deploying,
        .deployment-state--wip {
          --cc-icon-color: var(--cc-color-text-primary);
        }

        .instance-state--running,
        .deployment-state--succeeded {
          --cc-icon-color: var(--cc-color-text-success);
        }

        .instance-state--stopping,
        .deployment-state--cancelled {
          --cc-icon-color: var(--cc-color-text-warning);
        }

        .instance-state--deleted {
          --cc-icon-color: var(--cc-color-text-weak, #555);
        }

        .deployment-state--failed {
          --cc-icon-color: var(--cc-color-text-danger);
        }

        .empty {
          font-style: italic;
          padding-left: 0.75em;
        }

        input[type='checkbox'] {
          height: 1em;
          /* pixel perfect horizontal alignement with the header icon */
          margin: 0 0 0 0.1em;
          width: 1em;
        }
      `]}}window.customElements.define("cc-logs-instances-beta",$);export{$ as CcLogsInstances};
//# sourceMappingURL=cc-logs-instances.js.map
