import{LitElement as t,html as i,css as c}from"lit";import{iconRemixInformationFill as n}from"./assets/cc-remix.icons.js";import{getAssetUrl as a}from"./lib/assets-url.js";import{getDocUrl as e}from"./lib/dev-hub-url.js";import{i18n as o}from"./translation.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-icon.js";import"./cc-img.js";import"./cc-link.js";import"./cc-loader.js";import"./cc-notice.js";import{CcGrafanaToggleEvent as s,CcGrafanaResetEvent as r}from"./components/cc-grafana-info/cc-grafana-info.events.js";const l=a("/logos/grafana.svg"),d=a("/grafana/screens/home.png"),f=a("/grafana/screens/runtime.png"),g=a("/grafana/screens/addon.png"),b=e("/metrics");class h extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}_getDashboards(){return[{title:o("cc-grafana-info.screenshot.organisation.title"),url:d,description:o("cc-grafana-info.screenshot.organisation.description"),alt:o("cc-grafana-info.screenshot.organisation.alt")},{title:o("cc-grafana-info.screenshot.runtime.title"),url:f,description:o("cc-grafana-info.screenshot.runtime.description"),alt:o("cc-grafana-info.screenshot.runtime.alt")},{title:o("cc-grafana-info.screenshot.addon.title"),url:g,description:o("cc-grafana-info.screenshot.addon.description"),alt:o("cc-grafana-info.screenshot.addon.alt")}]}_onEnableSubmit(){this.dispatchEvent(new s({isEnabled:!0}))}_onResetSubmit(){this.dispatchEvent(new r)}_onDisableSubmit(){this.dispatchEvent(new s({isEnabled:!1}))}render(){const t="loaded"===this.state.type&&("enabling"===this.state.info.action||"disabling"===this.state.info.action),c="error"===this.state.type||"loaded"===this.state.type&&null!=this.state.info.action,a="loaded"===this.state.type&&"disabled"===this.state.info.status,e="loaded"===this.state.type&&"enabled"===this.state.info.status,s="loaded"===this.state.type&&"enabled"===this.state.info.status&&"resetting"===this.state.info.action;return i`
      <cc-block>
        <div slot="header-title">${o("cc-grafana-info.main-title")}</div>

        ${t?i` <cc-loader slot="overlay"></cc-loader> `:""}

        <cc-block-section slot="content-body">
          <div slot="title">${o("cc-grafana-info.documentation-title")}</div>
          <div slot="info">${o("cc-grafana-info.documentation-description")}</div>
          <div>
            <cc-link href="${b}" .icon=${n}>
              <span>${o("cc-grafana-info.link.doc")}</span>
            </cc-link>
          </div>
        </cc-block-section>

        ${"loading"===this.state.type?i`
              <cc-block-section slot="content-body">
                <div slot="title">${o("cc-grafana-info.loading-title")}</div>
                <div>
                  <cc-loader></cc-loader>
                </div>
              </cc-block-section>
            `:""}
        ${"error"===this.state.type?i`
              <cc-block-section slot="content-body">
                <div slot="title">${o("cc-grafana-info.loading-title")}</div>
                <cc-notice intent="warning" message="${o("cc-grafana-info.error-loading")}"></cc-notice>
              </cc-block-section>
            `:""}
        ${a?i`
              <cc-block-section slot="content-body">
                <div slot="title">${o("cc-grafana-info.enable-title")}</div>
                <div slot="info">
                  <p>${o("cc-grafana-info.enable-description")}</p>
                </div>
                <div>
                  <cc-button
                    success
                    ?waiting=${t}
                    ?disabled=${c&&!t}
                    @cc-click=${this._onEnableSubmit}
                  >
                    ${o("cc-grafana-info.enable-title")}
                  </cc-button>
                </div>
              </cc-block-section>
            `:""}
        ${"loaded"===this.state.type&&"enabled"===this.state.info.status?i`
              <cc-block-section slot="content-body">
                <div slot="title">${o("cc-grafana-info.grafana-link-title")}</div>
                <div slot="info">
                  <p>${o("cc-grafana-info.grafana-link-description")}</p>
                </div>
                ${null==this.state.info.link?i`
                      <cc-notice intent="warning" message="${o("cc-grafana-info.error-link-grafana")}"></cc-notice>
                    `:i`
                      <div>
                        <cc-link href="${this.state.info.link}" image="${l}">
                          <span>${o("cc-grafana-info.link.grafana")}</span>
                        </cc-link>
                      </div>
                    `}
              </cc-block-section>

              <cc-block-section slot="content-body">
                <div slot="title">${o("cc-grafana-info.reset-title")}</div>
                <div slot="info">${o("cc-grafana-info.reset-description")}</div>
                <div>
                  <cc-button
                    primary
                    ?disabled=${c&&!s}
                    ?waiting=${s}
                    @cc-click=${this._onResetSubmit}
                  >
                    ${o("cc-grafana-info.reset-title")}
                  </cc-button>
                </div>
              </cc-block-section>
            `:""}
        ${t?"":i`
              ${this._getDashboards().map((t=>i`
                  <cc-block-section slot="content-body">
                    <div slot="title">${t.title}</div>
                    <div slot="info">${t.description}</div>
                    <div>
                      <cc-link href="${t.url}" disable-external-link-icon a11y-desc="${t.alt}">
                        <img class="dashboard-screenshot" src="${t.url}" alt="${t.alt}" />
                      </cc-link>
                    </div>
                  </cc-block-section>
                `))}
            `}
        ${e?i`
              <cc-block-section slot="content-body">
                <div slot="title">${o("cc-grafana-info.disable-title")}</div>
                <div slot="info">${o("cc-grafana-info.disable-description")}</div>
                <div>
                  <cc-button
                    ?waiting=${t}
                    danger
                    delay="3"
                    ?disabled=${c&&!t}
                    @cc-click=${this._onDisableSubmit}
                  >
                    ${o("cc-grafana-info.disable-title")}
                  </cc-button>
                </div>
              </cc-block-section>
            `:""}

        <div slot="footer-right">
          <cc-link href="${b}" .icon="${n}">
            ${o("cc-grafana-info.documentation.text")}
          </cc-link>
        </div>
      </cc-block>
    `}static get styles(){return[c`
        :host {
          display: block;
        }

        cc-img {
          border-radius: var(--cc-border-radius-default, 0.25em);
          flex: 0 0 auto;
          height: 1.5em;
          margin-right: 0.5em;
          width: 1.5em;
        }

        cc-icon {
          flex: 0 0 auto;
          margin-right: 0.5em;
        }

        cc-link {
          align-items: center;
          display: inline-flex;
        }

        .dashboard-screenshot {
          border-radius: var(--cc-border-radius-default, 0.25em);
          max-width: 50em;
          width: 100%;
        }

        p {
          margin: 0;
        }

        br {
          display: block;
          margin: 0.5em 0;
        }
      `]}}window.customElements.define("cc-grafana-info",h);export{h as CcGrafanaInfo};
//# sourceMappingURL=cc-grafana-info.js.map
