import{LitElement as e,html as t,css as i}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{createRef as o,ref as r}from"lit/directives/ref.js";import{repeat as c}from"lit/directives/repeat.js";import{iconRemixInformationFill as n,iconRemixKey_2Fill as a,iconRemixDeleteBin_5Fill as l,iconRemixAddCircleFill as y}from"./assets/cc-remix.icons.js";import{LostFocusController as d}from"./controllers/lost-focus-controller.js";import{getDocUrl as m}from"./lib/dev-hub-url.js";import{fakeString as p}from"./lib/fake-strings.js";import{focusBySelector as k}from"./lib/focus-helper.js";import{formSubmit as h}from"./lib/form/form-submit-directive.js";import{Validation as g}from"./lib/form/validation.js";import{sortBy as b}from"./lib/utils.js";import{skeletonStyles as u}from"./styles/skeleton.js";import{i18n as f}from"./translation.js";import"./cc-badge.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-button.js";import"./cc-icon.js";import"./cc-img.js";import"./cc-input-text.js";import"./cc-link.js";import"./cc-notice.js";import{CcSshKeyCreateEvent as _,CcSshKeyDeleteEvent as $,CcSshKeyImportEvent as v}from"./components/cc-ssh-key-list/cc-ssh-key-list.events.js";const w=m("/account/ssh-keys-management"),L=[{type:"idle",name:p(15),fingerprint:p(32)}];class K{validate(e,t){return e.toLowerCase().match(" private ")?g.invalid("private-key"):g.VALID}}class x extends e{static get properties(){return{createKeyFormState:{type:Object,attribute:!1},keyListState:{type:Object,attribute:!1}}}constructor(){super(),this.createKeyFormState={type:"idle"},this.keyListState={type:"loading"},this._createFormRef=o(),new d(this,".key--personal",(({suggestedElement:e})=>{k(this.shadowRoot,null==e?"#personal-keys-empty-msg":"cc-button")})),new d(this,".key--github",(({suggestedElement:e})=>{k(this.shadowRoot,null==e?"#github-keys-empty-msg":"cc-button")})),this._nameErrorMessages={empty:()=>f("cc-ssh-key-list.error.required.name")},this._keyValidator=new K,this._keyErrorMessages={empty:()=>f("cc-ssh-key-list.error.required.public-key"),"private-key":()=>f("cc-ssh-key-list.error.private-key")}}resetCreateKeyForm(){this._createFormRef.value?.reset()}_onCreateKey(e){"string"==typeof e.name&&"string"==typeof e.publicKey&&this.dispatchEvent(new _({name:e.name,publicKey:e.publicKey}))}_onDeleteKey(e){const{type:t,...i}=e;this.dispatchEvent(new $({name:i.name}))}_onImportKey(e){const{type:t,...i}=e;this.dispatchEvent(new v(i))}render(){return t`
      <cc-block>
        <div slot="header-title">${f("cc-ssh-key-list.title")}</div>

        <!-- creation form -->
        <cc-block-section slot="content-body">
          <div slot="title">${f("cc-ssh-key-list.add.title")}</div>
          <div slot="info">${f("cc-ssh-key-list.add.info")}</div>

          ${this._renderCreateSshKeyForm()}
        </cc-block-section>

        <!-- personal keys -->
        <cc-block-section slot="content-body">
          <div slot="title">
            <span>${f("cc-ssh-key-list.personal.title")}</span>
            ${"loaded"===this.keyListState.type&&this.keyListState.personalKeys.length>2?t` <cc-badge circle>${this.keyListState.personalKeys.length}</cc-badge> `:""}
          </div>
          <div slot="info">${f("cc-ssh-key-list.personal.info")}</div>

          ${"loading"===this.keyListState.type?t` ${this._renderKeyList("skeleton",L)} `:""}
          ${"loaded"===this.keyListState.type?t`
                ${0===this.keyListState.personalKeys.length?t`
                      <p class="info-msg" id="personal-keys-empty-msg" tabindex="-1">
                        ${f("cc-ssh-key-list.personal.empty")}
                      </p>
                    `:""}
                ${this._renderKeyList("personal",this.keyListState.personalKeys)}
              `:""}
          ${"error"===this.keyListState.type?t` <cc-notice intent="warning" message="${f("cc-ssh-key-list.error.loading")}"></cc-notice> `:""}
        </cc-block-section>

        <!-- GitHub keys -->
        <cc-block-section slot="content-body">
          <div slot="title">
            <span>${f("cc-ssh-key-list.github.title")}</span>
            ${"loaded"===this.keyListState.type&&this.keyListState.isGithubLinked&&this.keyListState.githubKeys.length>2?t` <cc-badge circle>${this.keyListState.githubKeys.length}</cc-badge> `:""}
          </div>
          <div slot="info">${f("cc-ssh-key-list.github.info")}</div>

          ${"loading"===this.keyListState.type?t` ${this._renderKeyList("skeleton",L)} `:""}
          ${"loaded"!==this.keyListState.type||this.keyListState.isGithubLinked?"":t` <p class="info-msg">${f("cc-ssh-key-list.github.unlinked")}</p> `}
          ${"loaded"===this.keyListState.type&&this.keyListState.isGithubLinked?t`
                ${0===this.keyListState.githubKeys.length?t`
                      <p class="info-msg" id="github-keys-empty-msg" tabindex="-1">
                        ${f("cc-ssh-key-list.github.empty")}
                      </p>
                    `:""}
                ${this._renderKeyList("github",this.keyListState.githubKeys)}
              `:""}
          ${"error"===this.keyListState.type?t` <cc-notice intent="warning" message="${f("cc-ssh-key-list.error.loading")}"></cc-notice> `:""}
        </cc-block-section>

        <div slot="footer-right">
          <cc-link href="${w}" .icon="${n}">
            ${f("cc-ssh-key-list.documentation.text")}
          </cc-link>
        </div>
      </cc-block>
    `}_renderCreateSshKeyForm(){const e="creating"===this.createKeyFormState.type;return t`
      <form class="create-form" ${r(this._createFormRef)} ${h(this._onCreateKey.bind(this))}>
        <cc-input-text
          name="name"
          ?readonly=${e}
          class="create-form__name"
          label=${f("cc-ssh-key-list.add.name")}
          required
          .customErrorMessages=${this._nameErrorMessages}
        >
        </cc-input-text>
        <cc-input-text
          name="publicKey"
          ?readonly=${e}
          class="create-form__public-key"
          label=${f("cc-ssh-key-list.add.public-key")}
          required
          .customErrorMessages=${this._keyErrorMessages}
          .customValidator=${this._keyValidator}
        >
        </cc-input-text>
        <div class="create-form__footer">
          <cc-button class="create-form__add-btn" primary type="submit" ?waiting=${e}>
            ${f("cc-ssh-key-list.add.btn")}
          </cc-button>
        </div>
      </form>
    `}_renderKeyList(e,i){const o=[...i].sort(b("name")),r="skeleton"===e;return t`
      <div class="key-list">
        ${c(o,(e=>e.name),(i=>{const o=i.name,c=!r&&"idle"!==i.type;return t`
              <div class="key ${s({"key--personal":"personal"===e,"key--github":"github"===e,"key--skeleton":r,"is-waiting":c})}">
                <div class="key__icon">
                  <cc-icon .icon="${a}" size="lg" ?skeleton=${r}></cc-icon>
                </div>
                <div class="key__name">
                  <span class=${s({skeleton:r})}>${o}</span>
                </div>
                <div class="key__form">
                  <div class="key__fingerprint ${s({skeleton:r})}">${i.fingerprint}</div>

                  ${"personal"===e?t`
                        <cc-button
                          @cc-click=${()=>this._onDeleteKey(i)}
                          a11y-name="${f("cc-ssh-key-list.personal.delete.a11y",{name:o})}"
                          class="key__button key__button--personal"
                          .icon="${l}"
                          danger
                          outlined
                          ?waiting=${c}
                        >
                          ${f("cc-ssh-key-list.personal.delete")}
                        </cc-button>
                      `:""}
                  ${"github"===e?t`
                        <cc-button
                          @cc-click=${()=>this._onImportKey(i)}
                          a11y-name="${f("cc-ssh-key-list.github.import.a11y",{name:o})}"
                          class="key__button key__button--github"
                          .icon="${y}"
                          ?waiting=${c}
                        >
                          ${f("cc-ssh-key-list.github.import")}
                        </cc-button>
                      `:""}
                  ${"skeleton"===e?t`
                        <cc-button class="key__button key__button--skeleton" .icon="${y}" skeleton>
                          ${p(10)}
                        </cc-button>
                      `:""}
                </div>
              </div>
            `}))}
      </div>
    `}static get styles(){return[u,i`
        /* region global */
        :host {
          --skeleton-color: #bbb;

          display: block;
        }
        /* endregion */

        /* region creation form */

        .create-form {
          display: flex;
          flex-direction: column;
          gap: 1em;
        }

        .create-form__public-key {
          --cc-input-font-family: var(--cc-ff-monospace);
        }

        .create-form__footer {
          margin-inline-start: auto;
        }
        /* endregion */

        /* region key list */

        .key-list {
          display: flex;
          flex-direction: column;
          gap: 2.5em;
        }
        /* endregion */

        /* region key item */

        .key {
          display: grid;
          gap: 0.5em 0.75em;
          grid-template-areas:
            'key-icon key-name'
            '. key-form';
          grid-template-columns: min-content 1fr;
        }

        .key.is-waiting {
          cursor: default;
          opacity: var(--cc-opacity-when-disabled);
        }

        .key__icon {
          grid-area: key-icon;
        }

        .key__name {
          align-self: flex-end;
          font-size: 1.125em;
          font-weight: bold;
          grid-area: key-name;
          word-break: break-word;
        }

        .key__form {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
          grid-area: key-form;
          justify-content: flex-end;
        }

        /* TODO tokenize border & border-color */

        .key__fingerprint {
          background-color: var(--cc-color-bg-neutral);
          border-inline-start: 5px solid #a6a6a6;
          border-radius: 0.125em;
          flex-basis: min(100%, 21.25em);
          flex-grow: 1;
          font-family: var(--cc-ff-monospace);
          line-height: 1.5;
          padding: 0.5em 0.75em;
          word-break: break-word;
        }

        .key__button--personal {
          --cc-icon-size: 18px;
        }

        .key__button--github {
          --cc-icon-size: 20px;
        }

        .key__button--skeleton {
          --cc-icon-size: 20px;
        }
        /* endregion */

        /* region misc */
        /* TODO tokenize border & border-color */

        [slot='info'] {
          display: grid;
          gap: 1em;
          margin-top: 1.5em;
        }

        [slot='info'] code {
          background-color: var(--cc-color-bg-neutral);
          border: 1px solid var(--cc-color-border-neutral-weak, #eee);
          border-radius: var(--cc-border-radius-default, 0.25em);
          display: inline-block;
          font-family: var(--cc-ff-monospace);
          font-size: 0.9em;
          line-height: 2;
          padding: 0.25em 0.75em;
          white-space: pre-wrap;
          word-break: break-all;
        }

        [slot='info'] p {
          margin: 0;
        }

        .key--skeleton .skeleton {
          background-color: var(--skeleton-color);
        }

        .info-msg {
          color: var(--cc-color-text-weak);
          font-style: italic;
          line-height: 1.5;
          margin-bottom: 0;
          margin-top: 1em;
        }

        /* endregion */

        [slot='footer-right'] cc-link {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }
      `]}}window.customElements.define("cc-ssh-key-list",x);export{x as CcSshKeyList};
//# sourceMappingURL=cc-ssh-key-list.js.map
