import{LitElement as e,html as t,css as s}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{iconRemixInformationFill as n,iconRemixCheckLine as c,iconRemixCloseLine as r}from"./assets/cc-remix.icons.js";import{ResizeController as o}from"./controllers/resize-controller.js";import{fakeString as l}from"./lib/fake-strings.js";import{skeletonStyles as d}from"./styles/skeleton.js";import{i18n as g}from"./translation.js";import"./cc-badge.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-icon.js";import"./cc-img.js";import"./cc-input-text.js";import"./cc-link.js";import"./cc-notice.js";const m={name:l(15),url:l(20),baseUrl:l(20),description:l(45),picture:null,rights:null,key:l(20),secret:l(20)},h=["accessOrganisations","accessOrganisationsBills","accessOrganisationsConsumptionStatistics","accessOrganisationsCreditCount","accessPersonalInformation"],p=["manageOrganisations","manageOrganisationsApplications","manageOrganisationsMembers","manageOrganisationsServices","managePersonalInformation","manageSshKeys"],u=[460,550];class f extends e{static get properties(){return{editInfoHref:{type:String,attribute:"edit-info-href"},state:{type:Object}}}constructor(){super(),this.state={type:"loading"},this.editInfoHref=null,this._resizeController=new o(this,{widthBreakpoints:u})}_getName(e){switch(e){case"accessOrganisations":return g("cc-oauth-consumer-info.rights.access-organisations");case"accessOrganisationsBills":return g("cc-oauth-consumer-info.rights.access-organisations-bills");case"accessOrganisationsConsumptionStatistics":return g("cc-oauth-consumer-info.rights.access-organisations-consumption-statistics");case"accessOrganisationsCreditCount":return g("cc-oauth-consumer-info.rights.access-organisations-credit-count");case"accessPersonalInformation":return g("cc-oauth-consumer-info.rights.access-personal-information");case"manageOrganisations":return g("cc-oauth-consumer-info.rights.manage-organisations");case"manageOrganisationsApplications":return g("cc-oauth-consumer-info.rights.manage-organisations-applications");case"manageOrganisationsMembers":return g("cc-oauth-consumer-info.rights.manage-organisations-members");case"manageOrganisationsServices":return g("cc-oauth-consumer-info.rights.manage-organisations-services");case"managePersonalInformation":return g("cc-oauth-consumer-info.rights.manage-personal-information");case"manageSshKeys":return g("cc-oauth-consumer-info.rights.manage-ssh-keys");default:return l(70)}}render(){if("error"===this.state.type)return t`<cc-notice
        slot="content"
        intent="warning"
        message="${g("cc-oauth-consumer-info.error")}"
      ></cc-notice>`;const e="loading"===this.state.type,s="loaded"===this.state.type||"waiting"===this.state.type?this.state:m;return t`
      <div class="wrapper">
        <cc-block>
          <div slot="content" class="header-wrapper">
            <cc-img class="header-logo" ?skeleton=${e} src=${a(s.picture)}></cc-img>
            <div class="header-name">
              <span class="${i({skeleton:e})}">${s.name}</span>
            </div>
            <div class="header-description">
              <span class="${i({skeleton:e})}">${s.description}</span>
            </div>
            <cc-link class="edit-link" mode="button" href="${this.editInfoHref}" ?skeleton="${e}">
              ${g("cc-oauth-consumer-info.rights.edit")}
            </cc-link>
          </div>
        </cc-block>

        <cc-block>
          <cc-block-section slot="content-body">
            <div slot="title" class="access-title">${g("cc-oauth-consumer-info.access.title")}</div>
            <p class="description">${g("cc-oauth-consumer-info.info.description")}</p>
            <dl class="access-grid">
              <div>
                <dt>${g("cc-oauth-consumer-info.info.homepage-url")}</dt>
                <dd>
                  <cc-link
                    href="${s.url}"
                    a11y-desc="${s.url} - ${g("cc-oauth-consumer-info.info.homepage-url")} "
                    ?skeleton="${e}"
                  >
                    ${s.url}
                  </cc-link>
                </dd>
              </div>
              <div>
                <dt>${g("cc-oauth-consumer-info.info.base-url")}</dt>
                <dd>
                  <cc-link
                    href="${s.baseUrl}"
                    a11y-desc="${s.baseUrl} - ${g("cc-oauth-consumer-info.info.base-url")}"
                    ?skeleton="${e}"
                  >
                    ${s.baseUrl}
                  </cc-link>
                </dd>
              </div>
            </dl>
            <div class="access-grid">
              <cc-input-text
                label="${g("cc-oauth-consumer-info.info.key")}"
                readonly
                clipboard
                value=${s.key}
                ?skeleton=${e}
              ></cc-input-text>
              <cc-input-text
                label="${g("cc-oauth-consumer-info.info.secret")}"
                readonly
                secret
                clipboard
                value=${s.secret}
                ?skeleton=${e}
              ></cc-input-text>
            </div>
          </cc-block-section>
          <cc-block-section slot="content-body">
            <div class="header-rights">
              <div class="auth-title">${g("cc-oauth-consumer-info.rights.title")}</div>
              ${s.rights?.almighty?t`
                    <cc-badge intent="info" weight="dimmed" .icon=${n}
                      >${g("cc-oauth-consumer-info.rights.almighty")}
                    </cc-badge>
                  `:""}
            </div>
            <p class="description">${g("cc-oauth-consumer-info.rights.description")}</p>
            <div class="rights-container">
              <div class="access-rights">
                <div class="rights-title">${g("cc-oauth-consumer-info.rights-title.access")}</div>
                <div class="rights-section">${h.map((e=>this._renderRight(e)))}</div>
              </div>
              <div class="manage-rights">
                <div class="rights-title">${g("cc-oauth-consumer-info.rights-title.manage")}</div>
                <div class="rights-section">${p.map((e=>this._renderRight(e)))}</div>
              </div>
            </div>
          </cc-block-section>
        </cc-block>
      </div>
    `}_renderRight(e){const s=("loaded"===this.state.type||"waiting"===this.state.type)&&this.state.rights[e];return t`
      <div class="right">
        <cc-icon .icon="${s?c:r}" ?skeleton="${"loading"===this.state.type}"></cc-icon>
        <div>${this._getName(e)}</div>
      </div>
    `}static get styles(){return[d,s`
        :host {
          display: block;
        }

        .wrapper {
          container-type: inline-size;
          display: grid;
          gap: 1.5em;
        }

        /* region Header */

        .header-wrapper {
          display: grid;
          gap: 0.5em 1em;
          grid-template-areas:
            'logo name link'
            'logo description link';
          grid-template-columns: auto 1fr auto;
        }

        :host([w-lt-460]) .header-wrapper {
          grid-template-areas:
            'logo'
            'name'
            'description'
            'link';
          grid-template-columns: 1fr;
        }

        :host([w-lt-550]) .header-wrapper {
          grid-template-areas:
            'logo name'
            'logo description'
            'link link';
          grid-template-columns: auto 1fr;
        }

        .header-logo {
          grid-area: logo;
          height: 3.25em;
          width: 3.25em;
        }

        .header-name {
          color: var(--cc-color-text-primary-strongest);
          font-size: 1.2em;
          font-weight: bold;
          grid-area: name;
        }

        .header-description {
          grid-area: description;
        }

        .edit-link {
          align-items: center;
          align-self: center;
          display: flex;
          grid-area: link;
          justify-content: center;
        }

        /* end region */

        /* region Access */

        .access-title {
          font-size: 1.1em;
        }

        .description {
          margin-top: 0;
        }

        .access-grid,
        .rights-container {
          display: grid;
          gap: 3em;
          grid-template-columns: 1fr 1fr;
        }

        :host([w-lt-550]) .access-grid,
        :host([w-lt-550]) .rights-container {
          gap: 1em;
          grid-template-columns: 1fr;
        }

        .access-grid:first-of-type {
          margin-bottom: 1em;
        }

        .access-grid dd {
          word-break: break-word;
        }

        dl,
        dt,
        dd {
          margin: 0;
        }

        dt {
          margin-bottom: 0.35em;
        }

        /* end region */

        /* region Rights */

        .header-rights {
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        .auth-title {
          flex: 1 1 0;
          font-size: 1.1em;
          font-weight: bold;
        }

        .access-rights,
        .manage-rights {
          align-content: baseline;
          display: grid;
          gap: 1em;
        }

        .rights-title {
          font-weight: bold;
        }

        .rights-section {
          display: grid;
          gap: 0.5em;
        }

        .right {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        /* end region */

        .skeleton {
          background-color: #bbb;
          border-color: #777;
          color: transparent;
        }
      `]}}window.customElements.define("cc-oauth-consumer-info",f);export{f as CcOauthConsumerInfo};
//# sourceMappingURL=cc-oauth-consumer-info.js.map
