import{LitElement as e,html as t,css as c}from"lit";import{classMap as o}from"lit/directives/class-map.js";import{iconRemixHistoryLine as s,iconRemixCloseLine as d}from"./assets/cc-remix.icons.js";import{fakeString as n}from"./lib/fake-strings.js";import{cliCommandsStyles as a}from"./styles/cli-commands.js";import{skeletonStyles as i}from"./styles/skeleton.js";import{i18n as r}from"./translation.js";import"./cc-block-details.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-button.js";import"./cc-code.js";import"./cc-icon.js";import"./cc-input-text.js";import"./cc-link.js";import"./cc-notice.js";const l={createdAt:(new Date).toString(),expiresAt:(new Date).toString(),url:"",deleteCommand:"skeleton"},p={providerId:"skeleton",backups:[l,l,l,l,l]};class u extends e{static get properties(){return{addonId:{type:String,attribute:"addon-id"},state:{type:Object},_overlayType:{type:String,state:!0},_selectedBackup:{type:Object,state:!0}}}constructor(){super(),this.addonId="<ADDON_ID>",this.state={type:"loading"},this._overlayTriggeringButton=null,this._overlayType=null,this._selectedBackup=null}_displaySectionWithService(e){return"es-addon"===e}_getBackupLink(e){switch(e){case"es-addon":return r("cc-addon-backups.link.es-addon");case"es-addon-old":return r("cc-addon-backups.link.es-addon-old");case"postgresql-addon":return r("cc-addon-backups.link.postgresql-addon");case"mysql-addon":return r("cc-addon-backups.link.mysql-addon");case"mongodb-addon":return r("cc-addon-backups.link.mongodb-addon");case"redis-addon":return r("cc-addon-backups.link.redis-addon");case"jenkins":return r("cc-addon-backups.link.jenkins");case"skeleton":return n(18)}}_getBackupText({createdAt:e,expiresAt:t}){return null!=t?r("cc-addon-backups.text",{createdAt:e,expiresAt:t}):r("cc-addon-backups.text.user-defined-retention",{createdAt:e})}_getDescription(e){switch(e){case"es-addon":return r("cc-addon-backups.description.es-addon");case"es-addon-old":return r("cc-addon-backups.description.es-addon-old");case"postgresql-addon":return r("cc-addon-backups.description.postgresql-addon");case"mysql-addon":return r("cc-addon-backups.description.mysql-addon");case"mongodb-addon":return r("cc-addon-backups.description.mongodb-addon");case"redis-addon":return r("cc-addon-backups.description.redis-addon");case"jenkins":return r("cc-addon-backups.description.jenkins")}}_getManualDeleteDescription(e){switch(e){case"es-addon":case"es-addon-old":return r("cc-addon-backups.delete.manual.description.es-addon");default:return n(70)}}_getManualRestoreDescription(e){switch(e){case"es-addon":case"es-addon-old":return r("cc-addon-backups.restore.manual.description.es-addon");case"postgresql-addon":return r("cc-addon-backups.restore.manual.description.postgresql-addon");case"mysql-addon":return r("cc-addon-backups.restore.manual.description.mysql-addon");case"mongodb-addon":return r("cc-addon-backups.restore.manual.description.mongodb-addon");case"redis-addon":return r("cc-addon-backups.restore.manual.description.redis-addon");case"jenkins":return r("cc-addon-backups.restore.manual.description.jenkins");default:return n(70)}}_getRestoreWithServiceDescription(e,t){return"es-addon"===e?r("cc-addon-backups.restore.with-service.description.es-addon",{href:t}):n(80)}_getRestoreWithServiceTitle(e){return"es-addon"===e?r("cc-addon-backups.restore.with-service.title.es-addon"):n(20)}_onCloseOverlay(){this._overlayType=null,this._selectedBackup=null,this.updateComplete.then((()=>{this._overlayTriggeringButton.focus(),this._overlayTriggeringButton=null}))}_onOpenOverlay(e,t){return c=>{this._overlayType=e,this._selectedBackup=t,this._overlayTriggeringButton=c.target,this.updateComplete.then((()=>{this.shadowRoot.querySelector(".overlay cc-button").focus()}))}}render(){return t`
      <cc-block>
        <div slot="header-title">${r("cc-addon-backups.title")}</div>
        ${"error"===this.state.type?t`
              <cc-notice
                slot="content"
                intent="warning"
                message="${r("cc-addon-backups.loading-error")}"
              ></cc-notice>
            `:""}
        ${"loading"===this.state.type?this._renderLoading(this.state):""}
        ${"loaded"===this.state.type?this._renderLoaded(this.state):""}
        <cc-block-details slot="footer-left">
          <div slot="button-text">${r("cc-block-details.cli.text")}</div>
          <div slot="content">
            <p>${r("cc-addon-backups.cli.content.intro")} ${r("cc-addon-backups.cli.content.instruction")}</p>
            <dl>
              <dt>${r("cc-addon-backups.cli.content.list-backups-command")}</dt>
              <dd>
                <cc-code>clever database backups ${this.addonId}</cc-code>
              </dd>
              <dt>${r("cc-addon-backups.cli.content.download-backup-command")}</dt>
              <dd>
                <cc-code>clever database backups download ${this.addonId} &lt;BACKUP_ID&gt;</cc-code>
              </dd>
            </dl>
          </div>
        </cc-block-details>
      </cc-block>
    `}_renderLoading(e){return t`
      <div slot="content">
        <span class="skeleton"> ${n(150)} </span>
      </div>
      ${this._renderBackups(e,!1)}
    `}_renderLoaded(e){const c=e.backups.length>0,s="restore"===this._overlayType||"delete"===this._overlayType;return t`
      <div slot="content" class=${o({blurred:s})}>${this._getDescription(e.providerId)}</div>

      ${c?"":t` <div slot="content" class="empty-msg">${r("cc-addon-backups.empty")}</div> `}
      ${c?this._renderBackups(e,s):""}
      ${"restore"===this._overlayType?this._renderRestoreOverlay(e.providerId,e.passwordForCommand):""}
      ${"delete"===this._overlayType?this._renderDeleteOverlay(e.providerId,e.passwordForCommand):""}
    `}_renderBackups(e,c){const d="loading"===e.type,n="loading"===e.type||null!=this._overlayType,a="loaded"===e.type?e:p;return t`
      <div slot="content" class="backup-list ${o({blurred:c})}">
        ${a.backups.map((e=>t`
            <div class="backup">
              <span class="backup-icon"><cc-icon .icon=${s} size="lg"></cc-icon></span>
              <span class="backup-text">
                <span class="backup-text-details ${o({skeleton:d})}">${this._getBackupText(e)}</span>
                <br />
                <cc-link href="${null==this._overlayType?e.url:null}" ?skeleton="${d}"
                  >${this._getBackupLink(a.providerId)}</cc-link
                >
                <cc-button
                  link
                  ?disabled=${n}
                  ?skeleton=${d}
                  @cc-click=${this._onOpenOverlay("restore",e)}
                >
                  ${r("cc-addon-backups.restore.btn")}
                </cc-button>
                ${null!=e.deleteCommand?t`
                      <cc-button
                        link
                        ?disabled=${n}
                        ?skeleton=${d}
                        @cc-click=${this._onOpenOverlay("delete",e)}
                      >
                        ${r("cc-addon-backups.delete.btn")}
                      </cc-button>
                    `:""}
              </span>
            </div>
          `))}
      </div>
    `}_renderRestoreOverlay(e,c){return t`
      <!-- The restore and delete overlays are quite similar but's it's easier to read with a big if and some copy/paste than 8 ifs -->
      <cc-block slot="content" class="overlay">
        <div slot="header-title">${r("cc-addon-backups.restore",this._selectedBackup)}</div>
        <div slot="header-right">
          <cc-button
            class="overlay-close-btn"
            .icon=${d}
            hide-text
            outlined
            primary
            @cc-click=${this._onCloseOverlay}
            >${r("cc-addon-backups.close-btn")}</cc-button
          >
        </div>

        ${this._displaySectionWithService(e)?t`
              <cc-block-section slot="content-body">
                <div slot="title">${this._getRestoreWithServiceTitle(e)}</div>
                <div>${this._getRestoreWithServiceDescription(e,this._selectedBackup.url)}</div>
              </cc-block-section>
            `:""}

        <cc-block-section slot="content-body">
          <div slot="title">${r("cc-addon-backups.restore.manual.title")}</div>
          <div>${this._getManualRestoreDescription(e)}</div>
          ${null!=this._selectedBackup.restoreCommand?t`
                <cc-input-text readonly clipboard value="${this._selectedBackup.restoreCommand}"></cc-input-text>
                <div>${r("cc-addon-backups.command-password")}</div>
                <cc-input-text readonly clipboard secret value=${c}></cc-input-text>
              `:""}
        </cc-block-section>
      </cc-block>
    `}_renderDeleteOverlay(e,c){return t`
      <cc-block slot="content" class="overlay">
        <div slot="header-title">${r("cc-addon-backups.delete",this._selectedBackup)}</div>
        <div slot="header-right">
          <cc-button
            class="overlay-close-btn"
            .icon=${d}
            hide-text
            outlined
            primary
            @cc-click=${this._onCloseOverlay}
            >${r("cc-addon-backups.close-btn")}</cc-button
          >
        </div>

        ${this._displaySectionWithService(e)?t`
              <cc-block-section slot="content-body">
                <div slot="title">${r("cc-addon-backups.delete.with-service.title.es-addon")}</div>
                <div>
                  ${r("cc-addon-backups.delete.with-service.description.es-addon",{href:this._selectedBackup.url})}
                </div>
              </cc-block-section>
            `:""}

        <cc-block-section slot="content-body">
          <div slot="title">${r("cc-addon-backups.delete.manual.title")}</div>
          <div>${this._getManualDeleteDescription(e)}</div>
          <cc-input-text readonly clipboard value="${this._selectedBackup.deleteCommand}"></cc-input-text>
          <div>${r("cc-addon-backups.command-password")}</div>
          <cc-input-text readonly clipboard secret value=${c}></cc-input-text>
        </cc-block-section>
      </cc-block>
    `}static get styles(){return[i,a,c`
        :host {
          display: block;
          line-height: 1.5;
        }

        .backup-list {
          display: grid;
          grid-gap: 1.5em;
        }

        .backup {
          display: flex;
          line-height: 1.5em;
        }

        .backup-icon,
        .backup-text {
          margin-right: 0.5em;
        }

        .backup-icon {
          --cc-icon-color: #012a51;
        }

        .backup-text {
          color: var(--cc-color-text-weak);
        }

        .backup-text-details:not(.skeleton) strong {
          color: var(--cc-color-text-strongest, #000);
        }

        .backup-text cc-link {
          margin-right: 0.5em;
        }

        [title] {
          cursor: help;
        }

        /* SKELETON */

        .skeleton {
          background-color: #bbb;
        }

        .overlay {
          box-shadow: 0 0 1em rgb(0 0 0 / 40%);
          left: 50%;
          max-height: 80vh;
          max-width: 50em;
          overflow: auto;
          padding-inline: 0;
          position: fixed;
          transform: translateX(-50%);
          width: 90%;
          /* temporary fix until we rely on the dialog element and the top layer */
          z-index: 9999;
        }

        .overlay-close-btn {
          --cc-icon-size: 1.4em;
        }

        .blurred {
          filter: blur(5px);
        }

        cc-button[link] {
          margin-right: 0.5em;
          vertical-align: baseline;
        }

        cc-input-text {
          --cc-input-font-family: var(--cc-ff-monospace, monospace);
        }

        .empty-msg {
          color: var(--cc-color-text-weak);
          font-style: italic;
        }
      `]}}window.customElements.define("cc-addon-backups",u);export{u as CcAddonBackups};
//# sourceMappingURL=cc-addon-backups.js.map
