import{LitElement as t,html as e,css as s}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{iconCleverGit as a,iconCleverRunning as n,iconCleverStarting as o,iconCleverRestartFailed as r,iconCleverRestarting as l,iconCleverStartFailed as p,iconCleverUnknown as d}from"./assets/cc-clever.icons.js";import{iconRemixStopFill as m}from"./assets/cc-remix.icons.js";import{skeletonStyles as g}from"./styles/skeleton.js";import{waitingStyles as u}from"./styles/waiting.js";import{i18n as h}from"./translation.js";import"./cc-block.js";import"./cc-button.js";import"./cc-icon.js";import"./cc-link.js";import"./cc-notice.js";import"./cc-zone.js";import{CcDeploymentCancelEvent as $,CcApplicationRestartEvent as f,CcApplicationStartEvent as b,CcApplicationStopEvent as w}from"./components/cc-header-app/cc-header-app.events.js";const _={git:a,running:n,starting:o},y={"restart-failed":r,restarting:l,"restarting-with-downtime":o,running:n,"start-failed":p,starting:o,stopped:m,unknown:d},v={name:"??????????????????????????",commit:"????????????????????????????????????????",variantLogo:null,variantName:null,status:"unknown"};class k extends t{static get properties(){return{disableButtons:{type:Boolean,attribute:"disable-buttons",reflect:!0},state:{type:Object},_lastUserAction:{type:String,state:!0}}}constructor(){super(),this.state={type:"loading"},this.disableButtons=!1,this._lastUserAction=null}_getCommitTitle(t,e){if(null!=e)return"git"===t?h("cc-header-app.commits.git",{commit:e}):"running"===t?h("cc-header-app.commits.running",{commit:e}):"starting"===t?h("cc-header-app.commits.starting",{commit:e}):void 0}_getLastUserActionMsg(t){return"start"===t?h("cc-header-app.user-action-msg.app-will-start"):"restart"===t?h("cc-header-app.user-action-msg.deploy-will-begin"):"cancel"===t?h("cc-header-app.user-action-msg.deploy-cancelled"):"stop"===t?h("cc-header-app.user-action-msg.app-will-stop"):void 0}_getStatusMsg(t){return"restart-failed"===t?h("cc-header-app.state-msg.app-is-running")+" "+h("cc-header-app.state-msg.last-deploy-failed"):"restarting"===t||"restarting-with-downtime"===t?h("cc-header-app.state-msg.app-is-restarting"):"running"===t?h("cc-header-app.state-msg.app-is-running"):"start-failed"===t?h("cc-header-app.state-msg.app-is-stopped")+" "+h("cc-header-app.state-msg.last-deploy-failed"):h("starting"===t?"cc-header-app.state-msg.app-is-starting":"stopped"===t?"cc-header-app.state-msg.app-is-stopped":"cc-header-app.state-msg.unknown-state")}_onCancel(){this._lastUserAction="cancel",this.dispatchEvent(new $)}_onRestart(t){this._lastUserAction="restart",this.dispatchEvent(new f(t))}_onStart(t){this._lastUserAction="start",this.dispatchEvent(new b(t))}_onStop(){this._lastUserAction="stop",this.dispatchEvent(new w)}willUpdate(t){t.has("state")&&"loading"===this.state.type&&(this._lastUserAction=null)}render(){if("error"===this.state.type)return e`<cc-notice intent="warning" message="${h("cc-header-app.error")}"></cc-notice>`;const t="loading"===this.state.type,s="loaded"===this.state.type?{type:"loaded",...this.state.zone}:{type:"loading"},a="loaded"===this.state.type?this.state:v,n=["restarting","restarting-with-downtime","starting"].includes(a.status),o=["restart-failed","restarting","running"].includes(a.status);return e`
      <cc-block>
        <div slot="content" class="main">
          <div class="flavor-logo ${i({skeleton:t})}" title=${c(a.variantName)}>
            <!-- image has a presentation role => alt="" -->
            <img class="flavor-logo_img" src=${c(a.variantLogo)} alt="" />
          </div>

          <div class="details">
            <div class="name"><span class=${i({skeleton:t})}>${a.name}</span></div>
            <div class="commits">
              ${this._renderCommit(a.commit,"git","loading"===this.state.type)}
              ${"loaded"===this.state.type&&o?this._renderCommit(a.runningCommit,"running",!1):""}
              ${"loaded"===this.state.type&&n?this._renderCommit(a.startingCommit,"starting",!1):""}
            </div>
          </div>

          <div class="buttons">${this._renderActions(a.status,n,t)}</div>
        </div>

        <div slot="footer-left" class="messages ${i({"cc-waiting":n})}">
          ${this._renderFooter(a.status,a.lastDeploymentLogsUrl,t)}

          <cc-zone .state=${s} mode="small-infra"></cc-zone>
        </div>
      </cc-block>
    `}_renderActions(t,s,i){const a=null!=this._lastUserAction||this.disableButtons,n=["start-failed","stopped","unknown"].includes(t),o=["start-failed","stopped"].includes(t),r=i||["restart-failed","running","unknown"].includes(t),l=this.disableButtons?h("cc-header-app.disable-buttons"):void 0;return e`
      ${o?e`
            <cc-button
              title=${c(l)}
              ?disabled=${a}
              @cc-click=${()=>this._onStart("normal")}
            >
              ${h("cc-header-app.action.start")}
            </cc-button>
            <cc-button
              title=${c(l)}
              ?disabled=${a}
              @cc-click=${()=>this._onStart("rebuild")}
            >
              ${h("cc-header-app.action.start-rebuild")}
            </cc-button>
            <cc-button
              title=${c(l)}
              ?disabled=${a}
              @cc-click=${()=>this._onStart("last-commit")}
            >
              ${h("cc-header-app.action.start-last-commit")}
            </cc-button>
          `:""}
      ${r?e`
            <cc-button
              title=${c(l)}
              ?skeleton=${i}
              ?disabled=${a}
              @cc-click=${()=>this._onRestart("normal")}
            >
              ${h("cc-header-app.action.restart")}
            </cc-button>
            <cc-button
              title=${c(l)}
              ?skeleton=${i}
              ?disabled=${a}
              @cc-click=${()=>this._onRestart("rebuild")}
            >
              ${h("cc-header-app.action.restart-rebuild")}
            </cc-button>
            <cc-button
              title=${c(l)}
              ?skeleton=${i}
              ?disabled=${a}
              @cc-click=${()=>this._onRestart("last-commit")}
            >
              ${h("cc-header-app.action.restart-last-commit")}
            </cc-button>
          `:""}
      ${s?e`
            <cc-button
              warning
              outlined
              title=${c(l)}
              ?disabled=${a}
              @cc-click=${this._onCancel}
            >
              ${h("cc-header-app.action.cancel-deployment")}
            </cc-button>
          `:""}

      <cc-button
        danger
        outlined
        delay="3"
        title=${c(l)}
        ?skeleton=${i}
        ?disabled=${a||n}
        @cc-click=${this._onStop}
        >${h("cc-header-app.action.stop")}</cc-button
      >
    `}_renderCommit(t,s,a){return null==t&&"git"!==s?"":e`
      <span
        class="commit ${i({"cc-waiting":"starting"===s})}"
        title=${c(a?void 0:this._getCommitTitle(s,t))}
        data-type=${s}
      >
        <cc-icon class="commit_img ${s}" .icon=${_[s]}></cc-icon>
        ${null!=t?e`
              <!-- Keep this on one line to ease copy/paste -->
              <span class=${i({skeleton:a})}
                >${t.slice(0,8)}<span class="commit_rest">${t.slice(8)}</span></span
              >
            `:""}
        ${null==t?e` <span>${h("cc-header-app.commits.no-commits")}</span> `:""}
      </span>
    `}_renderFooter(t,s,c){const a="start"!==this._lastUserAction&&"stop"!==this._lastUserAction,n=["restart-failed","restarting","restarting-with-downtime","starting","start-failed"].includes(t);return e`
      ${a?e`
            <cc-icon class="status-icon ${t}" size="lg" .icon=${y[t]}></cc-icon>
            <span class=${i({skeleton:c})}> ${this._getStatusMsg(t)} </span>
            ${n?e`<cc-link href="${s}">${h("cc-header-app.read-logs")}</cc-link>`:""}
          `:""}
      ${null!=this._lastUserAction?e` ${this._getLastUserActionMsg(this._lastUserAction)} `:""}

      <span class="spacer"></span>
    `}static get styles(){return[g,u,s`
        :host {
          display: block;
        }

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

        .flavor-logo {
          align-self: flex-start;
          border-radius: var(--cc-border-radius-default, 0.25em);
          height: 3.25em;
          overflow: hidden;
          width: 3.25em;
        }

        .flavor-logo_img {
          display: block;
          height: 100%;
          width: 100%;
        }

        .skeleton .flavor-logo_img {
          opacity: 0;
        }

        .details {
          display: flex;
          flex: 1 1 max-content;
          flex-direction: column;
          justify-content: space-between;
        }

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

        .name {
          font-size: 1.1em;
          font-weight: bold;
        }

        .commit {
          align-items: center;
          display: flex;
        }

        .commit_img {
          margin-right: 0.2em;
        }

        .commit_img.git {
          --cc-icon-color: #555;
          --cc-icon-size: 1.3em;
        }

        .commit_img.running {
          --cc-icon-color: var(--color-legacy-green);
          --cc-icon-size: 1.25em;
        }

        .commit_img.starting {
          --cc-icon-color: var(--color-legacy-blue-icon);
          --cc-icon-size: 1.25em;
        }

        /* We hide the right part of the commit this way so this can be part of a copy/paste */

        .commit_rest {
          font-size: 0;
        }

        .buttons {
          align-self: center;
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        cc-button {
          flex: 1 1 auto;
          min-width: 0;
        }

        :host([disable-buttons]) cc-button {
          cursor: not-allowed;
        }

        .messages {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          font-size: 0.9em;
          font-style: italic;
          gap: 0.57em;
        }

        .status-icon {
          font-size: unset;
          margin-block: 0;
          margin-inline-end: 0;
        }

        .status-icon.restarting-with-downtime {
          --cc-icon-color: var(--color-legacy-blue-icon);
          --cc-icon-size: 1.25em;
        }

        .status-icon.running {
          --cc-icon-color: var(--color-legacy-green);
          --cc-icon-size: 1.25em;
        }

        .status-icon.start-failed {
          --cc-icon-color: var(--color-legacy-red);
          --cc-icon-size: 1.25em;
        }

        .status-icon.starting {
          --cc-icon-color: var(--color-legacy-blue-icon);
          --cc-icon-size: 1.25em;
        }

        .status-icon.stopped {
          --cc-icon-color: #ddd;
        }

        .status-icon.unknown {
          --cc-icon-color: #ddd;
        }

        .spacer {
          flex: 1 1 0;
        }

        cc-zone {
          /* FIXME: remove align-items once #1225 is merged */

          align-items: center;
          font-style: normal;
          white-space: nowrap;
        }

        [title] {
          cursor: help;
        }

        /* SKELETON */

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