import{LitElement as t,html as e,css as i}from"lit";import{createRef as a,ref as n}from"lit/directives/ref.js";import{iconRemixCloseLine as o}from"./assets/cc-remix.icons.js";import{formSubmit as d}from"./lib/form/form-submit-directive.js";import{Validation as c}from"./lib/form/validation.js";import{accessibilityStyles as s}from"./styles/accessibility.js";import{i18n as l}from"./translation.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-input-text.js";import"./cc-loader.js";import"./cc-notice.js";import{CcAddonDeleteEvent as r,CcAddonNameChangeEvent as m,CcAddonTagsChangeEvent as g}from"./components/cc-addon-admin/cc-addon-admin.events.js";class p extends t{static get properties(){return{noDangerZoneBackupText:{type:Boolean,attribute:"no-danger-zone-backup-text"},noDangerZoneVmText:{type:Boolean,attribute:"no-danger-zone-vm-text"},state:{type:Object},_name:{type:String,state:!0},_tags:{type:Array,state:!0}}}constructor(){super(),this.noDangerZoneBackupText=!1,this.noDangerZoneVmText=!1,this.state={type:"loading"},this._name=null,this._tags=null,this._confirmDeletionDialogRef=a(),this._confirmDeletionFormRef=a(),this._addonNameConfirmationValidator={validate:t=>"loaded"===this.state.type&&this.state.name===t?c.VALID:c.invalid("no-match")}}_onDeleteRequest(){this._confirmDeletionDialogRef.value.showModal()}_onDeleteSubmit(){"loaded"===this.state.type&&this.dispatchEvent(new r({id:this.state.id,name:this.state.name}))}_onNameInput({detail:t}){this._name=t}_onNameSubmit(){this.dispatchEvent(new m({name:this._name}))}_onTagsInput({detail:t}){this._tags=t}_onTagsSubmit(){this.dispatchEvent(new g({tags:this._tags}))}_onDialogClose(){this._confirmDeletionDialogRef.value.close()}willUpdate(t){t.has("state")&&"name"in this.state&&(this._name=this.state.name),t.has("state")&&"tags"in this.state&&(this._tags=this.state.tags)}updated(t){const e=t.get("state"),i="deleting"===e?.type,a="deleting"!==this.state.type;i&&a&&(this._confirmDeletionDialogRef.value?.close(),this._confirmDeletionFormRef.value?.reset())}render(){return e`
      <cc-block>
        <div slot="header-title">${l("cc-addon-admin.admin")}</div>

        ${"error"===this.state.type?e`
              <cc-notice slot="content" intent="warning" message="${l("cc-addon-admin.error-loading")}"></cc-notice>
            `:""}
        ${"error"!==this.state.type?this._renderContent(this.state):""}
      </cc-block>
    `}_renderContent(t){const i="loading"===t.type,a="updating-tags"===t.type||"updating-name"===t.type||"deleting"===t.type,n="loading"===t.type||a,o=!this.noDangerZoneBackupText,d=!this.noDangerZoneVmText;return e`
      <cc-block-section slot="content-body">
        <div slot="title">${l("cc-addon-admin.heading.name")}</div>
        <div slot="info"></div>
        <div class="one-line-form">
          <cc-input-text
            label="${l("cc-addon-admin.input.name")}"
            ?skeleton=${i}
            ?readonly=${n}
            .value=${this._name}
            @cc-input=${this._onNameInput}
            @cc-request-submit=${this._onNameSubmit}
          ></cc-input-text>
          <cc-button
            primary
            ?skeleton=${i}
            ?disabled=${n&&"updating-name"!==t.type}
            ?waiting=${"updating-name"===t.type}
            @cc-click=${this._onNameSubmit}
            >${l("cc-addon-admin.update")}</cc-button
          >
        </div>
      </cc-block-section>

      <cc-block-section slot="content-body">
        <div slot="title">${l("cc-addon-admin.heading.tags")}</div>
        <div slot="info">${l("cc-addon-admin.tags-description")}</div>
        <div class="one-line-form">
          <cc-input-text
            label="${l("cc-addon-admin.input.tags")}"
            ?skeleton=${i}
            ?readonly=${n}
            .tags=${this._tags}
            placeholder="${l("cc-addon-admin.tags-empty")}"
            @cc-tags-change=${this._onTagsInput}
            @cc-request-submit=${this._onTagsSubmit}
          ></cc-input-text>
          <cc-button
            primary
            ?skeleton=${i}
            ?disabled=${n&&"updating-tags"!==t.type}
            ?waiting=${"updating-tags"===t.type}
            @cc-click=${this._onTagsSubmit}
            >${l("cc-addon-admin.tags-update")}</cc-button
          >
        </div>
      </cc-block-section>

      <cc-block-section slot="content-body">
        <div slot="title" class="danger">${l("cc-addon-admin.danger-zone")}</div>
        <div slot="info" class="danger-desc">
          <p>
            <span>${l("cc-addon-admin.delete-disclaimer")}</span>
            ${d&&o?e`<span>${l("cc-addon-admin.delete-vm-and-backups")}</span>`:""}
            ${d&&!o?e`<span>${l("cc-addon-admin.delete-vm")}</span>`:""}
            ${o&&!d?e`<span>${l("cc-addon-admin.delete-backups")}</span>`:""}
          </p>
        </div>
        <div>
          <cc-button
            danger
            ?skeleton=${i}
            ?disabled=${n&&"deleting"!==t.type}
            ?waiting=${"deleting"===t.type}
            @cc-click=${this._onDeleteRequest}
            >${l("cc-addon-admin.delete")}</cc-button
          >
        </div>
      </cc-block-section>

      ${"loaded"===this.state.type||"deleting"===this.state.type?this._renderDeleteConfirmationDialog(this.state.name,"deleting"===this.state.type):""}
    `}_renderDeleteConfirmationDialog(t,i){const a={"no-match":l("cc-addon-admin.delete.dialog.error",{name:t})};return e`
      <dialog
        aria-labelledby="dialog-heading"
        closedby="any"
        ${n(this._confirmDeletionDialogRef)}
        slot="content-body"
      >
        <button class="dialog-close" @click=${this._onDialogClose} ?disabled="${i}">
          <span class="visually-hidden">${l("cc-addon-admin.delete.dialog.close")}</span>
          <cc-icon .icon="${o}"></cc-icon>
        </button>
        <div class="dialog-heading" id="dialog-heading">${l("cc-addon-admin.delete.dialog.heading")}</div>
        <p class="dialog-desc">${l("cc-addon-admin.delete.dialog.desc")}</p>
        <form class="dialog-form" ${d(this._onDeleteSubmit.bind(this))} ${n(this._confirmDeletionFormRef)}>
          <cc-input-text
            label="${l("cc-addon-admin.delete.dialog.label")}"
            required
            name="confirmation"
            ?readonly="${i}"
            .customValidator="${this._addonNameConfirmationValidator}"
            .customErrorMessages="${a}"
          >
            <p slot="help">${t}</p>
          </cc-input-text>
          <div class="dialog-form__actions">
            <cc-button type="button" outlined primary @cc-click="${this._onDialogClose}" ?disabled="${i}">
              ${l("cc-addon-admin.delete.dialog.cancel")}
            </cc-button>
            <cc-button type="submit" danger .waiting="${i}">
              ${l("cc-addon-admin.delete.dialog.confirm")}
            </cc-button>
          </div>
        </form>
      </dialog>
    `}static get styles(){return[s,i`
        :host {
          display: block;
        }

        .one-line-form {
          display: flex;
        }

        .one-line-form cc-input-text {
          flex: 1 1 10em;
          margin-right: 0.5em;
        }

        .one-line-form cc-button {
          margin-top: var(--cc-margin-top-btn-horizontal-form);
        }

        .danger-desc p {
          margin: 0;
        }

        dialog {
          border: none;
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-shadow: 2px 4px 8px 0 rgb(0 0 0 / 12%);
          box-sizing: border-box;
          padding: 4em;
          width: min(38em, 80%);
        }

        /* stylelint-disable-next-line media-feature-range-notation */
        @media screen and (max-width: 38em) {
          dialog {
            padding: 1em;
          }
        }

        ::backdrop {
          background: rgb(30 30 30 / 55%);
        }

        @supports (backdrop-filter: blur(5px)) {
          ::backdrop {
            backdrop-filter: blur(5px);
            background: rgb(30 30 30 / 35%);
          }
        }

        .dialog-close {
          background: none;
          border: none;
          border-radius: var(--cc-border-radius-default, 0.25em);
          color: var(--cc-color-text-weak);
          cursor: pointer;
          padding: 0.5em;
          position: absolute;
          right: 1.5em;
          top: 1.5em;

          --cc-icon-size: 1.4em;
        }

        .dialog-close:disabled {
          opacity: var(--cc-opacity-when-disabled, 0.65);
        }

        /* stylelint-disable-next-line media-feature-range-notation */
        @media screen and (max-width: 38em) {
          .dialog-close {
            right: 0.5em;
            top: 0.5em;
          }
        }

        .dialog-close:focus-visible {
          outline: var(--cc-focus-outline);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .dialog-heading {
          border-bottom: solid 1px var(--cc-color-border-neutral-weak);
          color: var(--cc-color-text-primary-strongest);
          font-weight: bold;
          margin-bottom: 1.25em;
          padding-bottom: 1.25em;
        }

        .dialog-desc {
          margin-bottom: 1.25em;
        }

        .dialog-form {
          display: grid;
        }

        .dialog-form__actions {
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
          justify-content: end;
          margin-top: 3.75em;
        }

        /* stylelint-disable-next-line media-feature-range-notation */
        @media screen and (max-width: 38em) {
          .dialog-form__actions {
            display: grid;
            justify-content: stretch;
            margin-top: 2em;
          }
        }
      `]}}window.customElements.define("cc-addon-admin",p);export{p as CcAddonAdmin};
//# sourceMappingURL=cc-addon-admin.js.map
