import{LitElement as e,html as s,css as t}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{createRef as o,ref as r}from"lit/directives/ref.js";import{iconRemixHistoryLine as a,iconRemixCalendar_2Fill as c,iconRemixInformationLine as d,iconRemixDeleteBinLine as l,iconRemixRadioButtonLine as p}from"./assets/cc-remix.icons.js";import{LostFocusController as m}from"./controllers/lost-focus-controller.js";import{ResizeController as u}from"./controllers/resize-controller.js";import{isExpirationClose as g}from"./lib/tokens.js";import{i18n as _}from"./translation.js";import"./cc-badge.js";import"./cc-block.js";import"./cc-button.js";import"./cc-icon.js";import"./cc-loader.js";import"./cc-notice.js";import{CcTokensRevokeAllEvent as f,CcTokenRevokeEvent as k}from"./components/common.events.js";class h extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"},this._currentSessionCardRef=o(),new u(this,{widthBreakpoints:[995,730]}),new m(this,".session-token-card__action-revoke",(({suggestedElement:e})=>{e instanceof HTMLElement?e.focus():this._currentSessionCardRef.value?.focus()})),new m(this,".revoke-all-sessions-button",(()=>{this._currentSessionCardRef.value?.focus()}))}_isCurrentSessionToken(e){return"loading"!==this.state.type&&"error"!==this.state.type&&this.state.currentSessionToken.id===e}_onRevokeAllTokens(){this.dispatchEvent(new f)}_onRevokeToken(e){this.dispatchEvent(new k(e))}render(){if("error"===this.state.type)return s`<cc-notice intent="warning" message="${_("cc-token-session-list.error")}"></cc-notice>`;const e=("loaded"===this.state.type||"revoking-all"===this.state.type)&&this.state.otherSessionTokens.length>0,t="loaded"===this.state.type||"revoking-all"===this.state.type?[this.state.currentSessionToken,...this.state.otherSessionTokens].sort(((e,s)=>s.creationDate.getTime()-e.creationDate.getTime())):[];return s`
      <cc-block>
        <div slot="header-title">${_("cc-token-session-list.main-heading")}</div>
        <div slot="header-right">
          ${e?s`
                <cc-button
                  class="revoke-all-sessions-button"
                  danger
                  outlined
                  ?waiting=${"revoking-all"===this.state.type}
                  @cc-click=${this._onRevokeAllTokens}
                >
                  ${_("cc-token-session-list.revoke-all-sessions")}
                </cc-button>
              `:""}
        </div>
        <div slot="content">
          <p>${_("cc-token-session-list.intro")}</p>
          <div class="session-tokens-wrapper">
            ${"loading"===this.state.type?s`<cc-loader></cc-loader>`:""}
            ${"loaded"===this.state.type||"revoking-all"===this.state.type?s`
                  <!-- TODO: A11Y when we add headings inside cards (User Agent / IP Address or whatever), we should remove the ul / li structure -->
                  <ul class="session-tokens-wrapper__list">
                    ${t.map(((e,s)=>this._renderTokenCard(e,s)))}
                  </ul>
                `:""}
          </div>
        </div>
      </cc-block>
    `}_renderTokenCard(e,t){const{id:o,creationDate:p,expirationDate:m,lastUsedDate:u,isCleverTeam:f}=e,k=this._isCurrentSessionToken(o),h="type"in e&&"revoking"===e.type,v=k?-1:null,b=g({creationDate:e.creationDate,expirationDate:e.expirationDate});return s`
      <li
        class="session-token-card ${i({"is-revoking":h})}"
        tabindex=${n(v)}
        ${k?r(this._currentSessionCardRef):""}
      >
        ${k||f||b?this._renderCardHeader({isCurrentSession:k,isCleverTeam:f,hasExpirationWarning:b}):""}
        <dl class="session-token-card__info-list">
          <div class="session-token-card__info-list__item session-token-card__info-list__item--italic">
            <dt>
              <cc-icon .icon=${a}></cc-icon>
              <span>${_("cc-token-session-list.card.label.last-used")}</span>
            </dt>
            <dd>${_("cc-token-session-list.card.human-friendly-date",{date:u})}</dd>
          </div>
          <div class="session-token-card__info-list__item">
            <dt>
              <cc-icon .icon=${c}></cc-icon>
              <span>${_("cc-token-session-list.card.label.creation")}</span>
            </dt>
            <dd>${_("cc-token-session-list.card.human-friendly-date",{date:p})}</dd>
          </div>
          <div class="session-token-card__info-list__item session-token-card__info-list__item--bold">
            <dt>
              <cc-icon .icon=${d}></cc-icon>
              <span>${_("cc-token-session-list.card.label.expiration")}</span>
            </dt>
            <dd>
              <span>${_("cc-token-session-list.card.human-friendly-date",{date:m})}</span>
            </dd>
          </div>
        </dl>
        ${k?"":s`
              <cc-button
                class="session-token-card__action-revoke"
                danger
                outlined
                hide-text
                .icon=${l}
                circle
                ?waiting=${h}
                @cc-click=${()=>this._onRevokeToken(o)}
              >
                ${_("cc-token-session-list.revoke-session",{tokenNumber:t+1})}
              </cc-button>
            `}
      </li>
    `}_renderCardHeader({isCurrentSession:e,isCleverTeam:t,hasExpirationWarning:i}){return s`
      <div class="session-token-card__header">
        ${e?s`
              <div class="session-token-card__header__current-session">
                <cc-icon .icon=${p}></cc-icon>
                <span>${_("cc-token-session-list.card.current-session")}</span>
              </div>
            `:""}
        ${t?s` <cc-badge intent="info">${_("cc-token-session-list.card.clever-team")}</cc-badge> `:""}
        ${!t&&i?s` <cc-badge intent="warning">${_("cc-token-session-list.card.expires-soon")}</cc-badge> `:""}
      </div>
    `}static get styles(){return t`
      :host {
        display: block;
      }

      /* Reset default margins and paddings */
      ul,
      li,
      dl,
      dd,
      dt {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }

      p {
        margin: 0;
      }

      .is-revoking > :not(cc-button) {
        opacity: var(--cc-opacity-when-disabled, 0.65);
      }

      /* When all other sessions are revoked, focus may return to the current session card */
      .session-token-card:focus-visible {
        outline: var(--cc-focus-outline);
        outline-offset: var(--cc-focus-outline-offset, 2px);
      }

      .session-tokens-wrapper {
        margin-top: 2.5em;
      }

      .session-tokens-wrapper__list {
        display: grid;
        gap: 1.5em;
      }

      @supports (grid-template-columns: subgrid) {
        .session-tokens-wrapper__list {
          grid-template-columns: [card-start info-start] max-content max-content 1fr [info-end actions-start] auto [actions-end card-end];
        }

        :host([w-lt-995]) .session-tokens-wrapper__list {
          grid-template-columns: [card-start info-start] 1fr 1fr 1fr [info-end actions-start] auto [actions-end card-end];
        }

        :host([w-lt-730]) .session-tokens-wrapper__list {
          grid-template-columns: [card-start info-start] 1fr [info-end actions-start] auto [actions-end card-end];
        }
      }

      .session-token-card {
        align-items: center;
        border: solid 1px var(--cc-color-border-neutral-weak, #e6e6e6);
        border-radius: var(--cc-border-radius-default, 0.25em);
        column-gap: 1em;
        display: grid;
        grid-template-columns: [card-start info-start] 1fr [info-end actions-start] max-content [actions-end card-end];
        padding: 1em;
      }

      @supports (grid-template-columns: subgrid) {
        .session-token-card {
          display: grid;
          grid-column: card-start / card-end;
          grid-template-columns: subgrid;
        }
      }

      .session-token-card__header {
        --cc-icon-size: 1.2em;

        align-items: center;
        column-gap: 1em;
        display: flex;
        flex-wrap: wrap;
        grid-column: info-start / info-end;
        margin-bottom: 1em;
        row-gap: 0.5em;
      }

      .session-token-card__header__current-session {
        align-items: center;
        color: var(--cc-color-text-success, #318051);
        display: flex;
        font-weight: bold;
        gap: 0.5em;
      }

      .session-token-card__info-list {
        display: flex;
        gap: 1em;
        grid-column: info-start / info-end;
      }

      :host([w-lt-730]) .session-token-card__info-list {
        display: grid;
        row-gap: 0.5em;
      }

      @supports (grid-template-columns: subgrid) {
        .session-token-card__info-list {
          display: grid;
          grid-column: info-start / info-end;
          grid-template-columns: subgrid;
        }

        :host([w-lt-730]) .session-token-card__info-list {
          row-gap: 0.5em;
        }
      }

      .session-token-card__info-list__item {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
      }

      @supports (grid-template-columns: subgrid) {
        :host([w-lt-995]) .session-token-card__info-list__item {
          display: grid;
        }

        :host([w-lt-730]) .session-token-card__info-list__item {
          display: flex;
        }
      }

      .session-token-card__info-list__item--italic {
        font-style: italic;
      }

      .session-token-card__info-list__item--bold {
        font-weight: bold;
      }

      dt {
        --line-height: 1.2em;
        --cc-icon-size: var(--line-height);

        align-items: center;
        display: flex;
        gap: 0.5em;
        line-height: var(--line-height);
      }

      dd {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
      }

      .session-token-card cc-button {
        align-self: start;
        grid-column: actions-start / actions-end;
        grid-row: 1 / -1;
        justify-self: end;
      }
    `}}customElements.define("cc-token-session-list",h);export{h as CcTokenSessionList};
//# sourceMappingURL=cc-token-session-list.js.map
