import{LitElement as e,html as t,css as i}from"lit";import{iconRemixInformationFill as c,iconRemixMessageLine as a}from"./assets/cc-remix.icons.js";import{i18n as s}from"./translation.js";import"./cc-badge.js";import"./cc-block.js";import"./cc-link.js";import"./cc-loader.js";import"./cc-notice.js";import"./cc-toggle.js";import{CcFeatureSettingChangeEvent as r}from"./components/cc-feature-list/cc-feature-list.events.js";class n extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}_onToggleChange(e,t){"loading"!==this.state.type&&this.dispatchEvent(new r({featureId:e.id,newValue:t}))}_getFeatureStatus(e){switch(e){case"alpha":return{text:s("cc-feature-list.status.alpha"),intent:"warning"};case"beta":return{text:s("cc-feature-list.status.beta"),intent:"info"};case"preview":return{text:s("cc-feature-list.status.preview"),intent:""};default:return null}}_renderFeature(e){const i=this._getFeatureStatus(e.status);return t`
      <div class="feature">
        <div class="header">
          <div class="header-title">
            <div class="title">${e.name}</div>
            <div class="status">
              ${e.status?t` <cc-badge intent="${i.intent}"> ${i.text} </cc-badge> `:""}
            </div>
          </div>
          <cc-toggle
            .choices="${e.options}"
            value="${e.value}"
            @cc-select=${t=>this._onToggleChange(e,t.detail)}
          ></cc-toggle>
        </div>
        <div>${e.description}</div>
        ${null!=e.documentationLink||null!=e.feedbackLink?t`
              <div class="footer">
                ${null!=e.documentationLink?t`
                      <cc-link
                        .href=${e.documentationLink}
                        a11y-desc="${s("cc-feature-list.documentation-link")} - ${e.name}"
                        .icon=${c}
                      >
                        ${s("cc-feature-list.documentation-link")}
                      </cc-link>
                    `:""}
                ${null!=e.feedbackLink?t`
                      <cc-link
                        .href=${e.feedbackLink}
                        a11y-desc="${s("cc-feature-list.feedback-link")} - ${e.name}"
                        .icon=${a}
                      >
                        ${s("cc-feature-list.feedback-link")}
                      </cc-link>
                    `:""}
              </div>
            `:""}
      </div>
    `}render(){const e="loaded"===this.state.type&&0===this.state.featureList.length;return t`
      <cc-block>
        <div slot="header-title">${s("cc-feature-list.title")}</div>
        <div slot="content">
          ${"loaded"!==this.state.type||e?"":t`<cc-notice message=${s("cc-feature-list.notice")}></cc-notice>`}
          <div class="feature-list">
            ${"loading"===this.state.type?t` <cc-loader></cc-loader>`:""}
            ${"error"===this.state.type?t` <cc-notice intent="warning" message=${s("cc-feature-list.error")}></cc-notice> `:""}
            ${"loaded"===this.state.type&&e?t` <cc-notice intent="info" message=${s("cc-feature-list.no-data")}></cc-notice> `:""}
            ${"loaded"!==this.state.type||e?"":this.state.featureList.map((e=>this._renderFeature(e)))}
          </div>
        </div>
      </cc-block>
    `}static get styles(){return[i`
        :host {
          display: block;
        }

        .feature-list {
          display: flex;
          flex-direction: column;
          gap: 0.5em;
          margin-top: 1em;
        }

        .feature {
          border: solid 1px var(--cc-color-border-neutral-weak, #e7e7e7);
          border-radius: var(--cc-border-radius-default);
          display: flex;
          flex-direction: column;
          gap: 0.6em;
          padding: 1em;
        }

        .feature .header {
          align-items: center;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 0.5em;
          justify-content: space-between;
        }

        .feature .header-title {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 0.75em;
        }

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

        .feature .footer {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 0.75em;
        }
      `]}}window.customElements.define("cc-feature-list",n);export{n as CcFeatureList};
//# sourceMappingURL=cc-feature-list.js.map
