import{LitElement as e,html as t,css as i}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{ifDefined as o}from"lit/directives/if-defined.js";import{iconCleverRestarting as a,iconCleverRunning as n,iconCleverRestartFailed as c}from"./assets/cc-clever.icons.js";import{fakeString as l}from"./lib/fake-strings.js";import{isStringEmpty as d}from"./lib/utils.js";import{skeletonStyles as r}from"./styles/skeleton.js";import{i18n as p}from"./translation.js";import"./cc-badge.js";import"./cc-block.js";import"./cc-button.js";import"./cc-clipboard.js";import"./cc-img.js";import"./cc-link.js";import"./cc-notice.js";import"./cc-zone.js";import{CcAddonRestartEvent as m,CcAddonRebuildEvent as g}from"./components/cc-addon-header/cc-addon-header.events.js";const f={deploying:a,active:n,failed:c,deleted:null},u={providerId:l(15),providerLogoUrl:null,name:l(15),id:l(15),zone:null};class h extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading",logsUrl:"",openLinks:[],actions:{restart:!1,rebuildAndRestart:!1}}}_getStatusMsg(e,t){return"deploying"===e?p("cc-addon-header.state-msg.deployment-is-deploying"):"active"===e?p("cc-addon-header.state-msg.deployment-is-active",{providerId:t}):p("failed"===e?"cc-addon-header.state-msg.deployment-failed":"cc-addon-header.state-msg.unknown-state")}_onRestart(){this.dispatchEvent(new m)}_onRebuild(){this.dispatchEvent(new g)}render(){if("error"===this.state.type)return t` <cc-notice slot="content" intent="warning" message=${p("cc-addon-header.error")}></cc-notice>`;const e="loading"===this.state.type,i="loaded"===this.state.type||"restarting"===this.state.type||"rebuilding"===this.state.type?this.state:{...u,...this.state},a="loaded"!==this.state.type&&"restarting"!==this.state.type&&"rebuilding"!==this.state.type||!this.state.zone?{type:"loading"}:{type:"loaded",...this.state.zone},n="restarting"===this.state.type,c="rebuilding"===this.state.type,l=this.state.deploymentStatus,r="loaded"===this.state.type?this.state.providerId:"";return t`
      <cc-block>
        <div slot="content" class="main">
          <div class="addon-information">
            <cc-img
              class="logo"
              ?skeleton=${e}
              src=${o(i.providerLogoUrl)}
              a11y-name=${i.providerId}
            ></cc-img>

            <div class="details">
              <div class="details__title">
                <span class="details__name ${s({skeleton:e})}">${i.name}</span>
                ${d(i.productStatus)?"":t` <cc-badge ?skeleton=${e}>${i.productStatus}</cc-badge> `}
              </div>
              <div class="details__id">
                <span class="${s({skeleton:e})}">${i.id}</span>
                ${"loaded"===this.state.type||"restarting"===this.state.type||"rebuilding"===this.state.type?t` <cc-clipboard value=${i.id}></cc-clipboard> `:""}
              </div>
            </div>
          </div>

          <div class="actions">
            ${i.openLinks?.map((i=>t`
                <cc-link
                  mode="button"
                  href="${i.url}"
                  a11y-desc="${p("cc-addon-header.action.open-addon",{linkName:i.name})}"
                  ?skeleton=${e}
                >
                  ${p("cc-addon-header.action.open-addon",{linkName:i.name})}
                </cc-link>
              `))}
            ${null!=i.configLink?t`
                  <cc-link
                    mode="button"
                    href="${i.configLink.href}"
                    ?skeleton=${e}
                    download="${i.configLink.fileName}"
                    >${p("cc-addon-header.action.get-config")}
                  </cc-link>
                `:""}
            ${!0===i.actions?.restart?t`
                  <cc-button
                    type="button"
                    ?skeleton=${e}
                    ?waiting=${n}
                    ?disabled=${c}
                    @cc-click=${this._onRestart}
                  >
                    ${p("cc-addon-header.action.restart")}
                  </cc-button>
                `:""}
            ${!0===i.actions?.rebuildAndRestart?t`
                  <cc-button
                    type="button"
                    ?skeleton=${e}
                    ?waiting=${c}
                    ?disabled=${n}
                    @cc-click=${this._onRebuild}
                  >
                    ${p("cc-addon-header.action.restart-rebuild")}
                  </cc-button>
                `:""}
          </div>
        </div>

        <div slot="footer-left" class="footer messages">
          ${d(l)?"":t`
                <cc-icon
                  class="status-icon ${l}"
                  size="lg"
                  .icon=${f[l]}
                  ?skeleton=${e}
                ></cc-icon>
                <span class=${s({skeleton:e})}> ${this._getStatusMsg(l,r)} </span>
              `}
          ${d(i.logsUrl)?"":t`
                <cc-link
                  href=${i.logsUrl}
                  a11y-desc="${p("cc-addon-header.logs.link")}"
                  ?skeleton=${e}
                >
                  ${p("cc-addon-header.logs.link")}
                </cc-link>
              `}
        </div>
        <cc-zone slot="footer-right" .state=${a} mode="small-infra"></cc-zone>
      </cc-block>
    `}static get styles(){return[r,i`
        :host {
          container-type: inline-size;
          display: block;
        }

        .main {
          display: grid;
          flex-wrap: wrap;
          gap: 1em;
          grid-auto-flow: column;
          justify-content: space-between;
          min-width: 0;
        }

        @container (max-width: 59em) {
          .main {
            grid-auto-flow: row;
          }
        }

        .addon-information {
          display: flex;
          flex: 1 1 0;
          gap: 1em;
          min-width: 0;
        }

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

        .details {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-around;
          min-width: 0;
        }

        .details__title {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em 0.75em;
        }

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

        .details__id {
          align-items: center;
          display: flex;
          gap: 0.5em;
          min-width: 0;
        }

        .details__id span {
          display: block;
          font-family: var(--cc-ff-monospace);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .actions {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 0.75em;
        }

        .actions cc-link,
        .actions cc-button {
          flex: 1 1 auto;
        }

        @container (max-width: 59em) {
          .actions cc-link,
          .actions cc-button {
            flex: 0 0 auto;
          }
        }

        @container (max-width: 34em) {
          .actions {
            display: flex;
            flex: 1 1 auto;
          }

          .actions cc-link {
            width: 100%;
          }

          .actions cc-button {
            flex: 1 0 min(100%, 12.5em);
          }
        }

        @container (max-width: 28em) {
          .actions cc-link,
          .actions cc-button {
            flex: 1 0 min(100%, 12.5em);
          }
        }

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

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

        .messages cc-link,
        .messages cc-zone {
          font-style: normal;
        }

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

        .status-icon.deploying {
          --cc-icon-size: 1.25em;
        }

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

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

        .footer__spacer {
          flex: 1 1 0;
        }

        .skeleton {
          background-color: #bbb;
          border-color: #777;
          color: transparent;
        }
      `]}}window.customElements.define("cc-addon-header",h);export{h as CcAddonHeader};
//# sourceMappingURL=cc-addon-header.js.map
