import{LitElement as e,html as t,css as c}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{iconRemixLoginCircleFill as o,iconRemixForbid_2Line as s}from"./assets/cc-remix.icons.js";import{skeletonStyles as n}from"./styles/skeleton.js";import{waitingStyles as r}from"./styles/waiting.js";import{i18n as a}from"./translation.js";import"./cc-button.js";import"./cc-icon.js";import"./cc-loader.js";import{CcTcpRedirectionCreateEvent as d,CcTcpRedirectionDeleteEvent as l}from"./components/cc-tcp-redirection/cc-tcp-redirection.events.js";const p={namespace:"default",isPrivate:!1};class m extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"}}_getButtonText(e){return a(null!=e?"cc-tcp-redirection.delete-button":"cc-tcp-redirection.create-button")}_getHelpText(e,t){return null!=t?a("cc-tcp-redirection.redirection-defined",{namespace:e,sourcePort:t}):a("cc-tcp-redirection.redirection-not-defined",{namespace:e})}_getHelpTextAddendum(e,t){if(t)return a("cc-tcp-redirection.namespace-private");switch(e){case"default":return a("cc-tcp-redirection.namespace-additionaldescription-default");case"cleverapps":return a("cc-tcp-redirection.namespace-additionaldescription-cleverapps")}}_isStateLoadedOrWaiting(e){return"loaded"===e.type||"waiting"===e.type}_onCreate(){if(this._isStateLoadedOrWaiting(this.state)){const{namespace:e}=this.state;this.dispatchEvent(new d({namespace:e}))}}_onDelete(){if(this._isStateLoadedOrWaiting(this.state)){const{namespace:e,sourcePort:t}=this.state;this.dispatchEvent(new l({namespace:e,sourcePort:t}))}}render(){const e="loading"===this.state.type,{namespace:c,sourcePort:n,isPrivate:r}="loading"===this.state.type?p:this.state,a=null!=n,d=this._getHelpTextAddendum(c,r);return t`
      <div class="wrapper">
        ${e?t` <div class="icon skeleton"></div> `:""}
        ${"loaded"===this.state.type?t`
              <div class="icon">
                ${a?t`<cc-icon .icon=${o} class="on"></cc-icon>`:t`<cc-icon .icon=${s} class="off"></cc-icon>`}
              </div>
            `:""}
        ${"waiting"===this.state.type?t`
              <div class="icon">
                <cc-loader></cc-loader>
              </div>
            `:""}

        <div class="text-button ${i({"cc-waiting":e})}">
          <div class="text-wrapper">
            <span class="text ${i({skeleton:e})}">${this._getHelpText(c,n)}</span>
            ${null!=d?t`
                  <br />
                  <span class="text-addendum ${i({skeleton:e})}">${d}</span>
                `:""}
          </div>

          <cc-button
            outlined
            ?skeleton=${e}
            ?waiting=${"waiting"===this.state.type}
            ?danger=${a}
            delay=${a?3:0}
            ?primary=${!a}
            @cc-click=${a?this._onDelete:this._onCreate}
          >
            ${this._getButtonText(n)}
          </cc-button>
        </div>
      </div>
    `}static get styles(){return[n,r,c`
        :host {
          display: block;
        }

        .wrapper {
          display: flex;
          flex-wrap: wrap;
          gap: 0.8em;
        }

        .icon {
          flex: 0 0 auto;
          height: 1.5em;
          width: 1.5em;
        }

        .icon cc-icon {
          height: 100%;
          width: 100%;
        }

        .icon cc-icon.off {
          --cc-icon-color: #999;
        }

        .icon cc-icon.on {
          --cc-icon-color: var(--cc-color-bg-success);
        }

        .icon cc-loader {
          --cc-loader-color: #999;
        }

        .text-button {
          display: flex;
          flex: 1 1 0;
          flex-wrap: wrap;
          gap: 1em;
        }

        .text-wrapper {
          flex: 1 1 30em;
          line-height: 1.6em;
        }

        .text strong {
          white-space: nowrap;
        }

        .text:not(.skeleton) code {
          background-color: var(--cc-color-bg-neutral);
          border-radius: var(--cc-border-radius-default, 0.25em);
          font-family: var(--cc-ff-monospace);
          padding: 0.15em 0.3em;
        }

        .text-addendum:not(.skeleton) {
          color: var(--cc-color-text-weak);
        }

        .skeleton {
          background-color: #bbb;
        }
      `]}}window.customElements.define("cc-tcp-redirection",m);export{m as CcTcpRedirection};
//# sourceMappingURL=cc-tcp-redirection.js.map
