import{LitElement as t,html as e,css as i}from"lit";import{classMap as n}from"lit/directives/class-map.js";import{iconCleverArrowsRight as r,iconCleverArrowsLeft as c}from"./assets/cc-clever.icons.js";import{iconRemixFunctions as s,iconRemixAddLine as o,iconRemixArrowDownSLine as a,iconRemixDatabase_2Fill as l,iconRemixUser_3Fill as p}from"./assets/cc-remix.icons.js";import{ResizeController as u}from"./controllers/resize-controller.js";import{PricingConsumptionSimulator as d}from"./lib/pricing.js";import{i18n as m}from"./translation.js";import"./cc-button.js";import"./cc-icon.js";import"./cc-input-number.js";import"./cc-loader.js";import"./cc-notice.js";import{CcPricingPlanAddEvent as g}from"./components/cc-pricing-page/cc-pricing-page.events.js";import"./cc-toggle.js";const v={storage:l,"inbound-traffic":r,"outbound-traffic":c,"private-users":p,"public-users":p};class b extends t{static get properties(){return{action:{type:String},currency:{type:String},state:{type:Object}}}constructor(){super(),this.action="add",this.currency="EUR",this.state={type:"loading"},this._simulator=new d,this._sectionStates={},this._resizeController=new u(this)}_getTitle(t){switch(t){case"storage":return m("cc-pricing-product-consumption.storage.title");case"inbound-traffic":return m("cc-pricing-product-consumption.inbound-traffic.title");case"outbound-traffic":return m("cc-pricing-product-consumption.outbound-traffic.title");case"private-users":return m("cc-pricing-product-consumption.private-users.title");case"public-users":return m("cc-pricing-product-consumption.public-users.title");case"total":return m("cc-pricing-product-consumption.total.title")}}_getLabel(t){switch(t){case"storage":return m("cc-pricing-product-consumption.storage.label");case"inbound-traffic":return m("cc-pricing-product-consumption.inbound-traffic.label");case"outbound-traffic":return m("cc-pricing-product-consumption.outbound-traffic.label");case"private-users":return m("cc-pricing-product-consumption.private-users.label");case"public-users":return m("cc-pricing-product-consumption.public-users.label")}}_getCurrencyValue(t){return{price:t,currency:this.currency}}_getMaxRange(t,e){return null==e?"∞":this._isTypeBytes(t)?m("cc-pricing-product-consumption.bytes",{bytes:e}):e}_getMinRange(t,e){return this._isTypeBytes(t)?m("cc-pricing-product-consumption.bytes",{bytes:e}):e}_getIntervalPrice(t,e){return"loaded"!==this.state.type?null:0===e?m("cc-pricing-product-consumption.price-interval.free"):this._isTypeBytes(t)?m("cc-pricing-product-consumption.price-interval.bytes",this._getCurrencyValue(1e9*e)):m("cc-pricing-product-consumption.price-interval.users",{...this._getCurrencyValue(e),userCount:this.state.sections.find((e=>e.type===t)).secability??1})}_getUnits(){return[{label:m("cc-pricing-product-consumption.bytes-unit",{bytes:1e6}),value:"1000000"},{label:m("cc-pricing-product-consumption.bytes-unit",{bytes:1e9}),value:"1000000000"},{label:m("cc-pricing-product-consumption.bytes-unit",{bytes:1e12}),value:"1000000000000"}]}_isTypeBytes(t){return["storage","inbound-traffic","outbound-traffic"].includes(t)}_updateSimulatorQuantity(t){const e=this._sectionStates[t].quantity,i=this._isTypeBytes(t)?parseInt(this._sectionStates[t].unitValue):1;this._simulator.setQuantity(t,e*i)}_onAddPlan(){if("loaded"!==this.state.type)return;const t=(this.state?.sections??[]).map((({type:t})=>`${this._getTitle(t)} ${this._isTypeBytes(t)?m("cc-pricing-product-consumption.bytes",{bytes:this._simulator.getQuantity(t)}):m("cc-pricing-product-consumption.number",{number:this._simulator.getQuantity(t)})}`)).join(", "),e={productName:this.state.name,name:t,price:this._simulator.getTotalPrice()/720,sections:this.state.sections.map((t=>({...t,quantity:this._simulator.getQuantity(t.type)})))};this.dispatchEvent(new g(e))}_onInputValue(t){return e=>{this._sectionStates[t].quantity=isNaN(e.detail)?0:e.detail,this._updateSimulatorQuantity(t),this.requestUpdate()}}_onToggleUnit(t){return e=>{this._sectionStates[t].unitValue=e.detail,this._updateSimulatorQuantity(t),this.requestUpdate()}}_onToggleState(t){this._sectionStates[t].isClosed=!this._sectionStates[t].isClosed,this.requestUpdate()}willUpdate(t){t.has("state")&&"loaded"===this.state.type&&Array.isArray(this.state.sections)&&(this._sectionStates={},this.state.sections.forEach((({type:t})=>{this._sectionStates[t]={isClosed:!0,quantity:0,unitValue:this._getUnits()[0].value}})),this._simulator=new d(this.state.sections))}render(){return e`
      ${"error"===this.state.type?e` <cc-notice intent="warning" message=${m("cc-pricing-product-consumption.error")}></cc-notice> `:""}
      ${"loading"===this.state.type?e` <cc-loader></cc-loader> `:""}
      ${"loaded"===this.state.type?this._renderLoaded(this.state.sections):""}
    `}_renderLoaded(t){const{width:i}=this._resizeController,r={"body--big":i>600,"body--small":i<=600},c=t.some((({intervals:t})=>null==t)),a=t.map((({type:t})=>this._simulator.getQuantity(t))).every((t=>0===t));return e`
      <div class="body ${n(r)}">
        ${t.map((t=>this._renderSection(t)))}

        <div class="section">
          <div class="section-header">
            <cc-icon class="section-icon sum-icon" .icon=${s} size="lg"></cc-icon>
            <div class="section-title section-title--total">
              <div class="section-title-text">${this._getTitle("total")}</div>
              <div class="section-title-price">
                ${m("cc-pricing-product-consumption.price",this._getCurrencyValue(this._simulator.getTotalPrice()))}
              </div>
            </div>
          </div>
        </div>
        <hr class="${n({last:"none"===this.action})}" />

        ${"add"===this.action?e`
              <div class="button-bar">
                <cc-button
                  .icon=${o}
                  ?disabled=${c||a}
                  @cc-click=${this._onAddPlan}
                >
                  ${m("cc-pricing-product-consumption.add")}
                </cc-button>
              </div>
            `:""}
      </div>
    `}_renderSection(t){const i=t.intervals,r=t.progressive,c=t.type,s=v[c],{isClosed:o,quantity:l,unitValue:p}=this._sectionStates[c],u=this._simulator.getSectionPrice(c),d=this._simulator.getMaxInterval(c);return e`
      <div class="section ${n({"section--closed":o})}">
        <div class="section-header">
          <cc-icon class="section-icon" .icon=${s}></cc-icon>
          <div class="section-title">${this._getTitle(c)}</div>
        </div>

        <div class="input-wrapper">${this._renderInput({type:c,quantity:l,unitValue:p})}</div>

        <button
          aria-controls=${t.type}
          aria-expanded=${!1===this._sectionStates[c].isClosed}
          class="section-toggle-btn"
          @click=${()=>this._onToggleState(c)}
        >
          <span>${m("cc-pricing-product-consumption.toggle-btn.label")}</span>
          <cc-icon class="expand-icon" .icon=${a}></cc-icon>
        </button>

        <div id=${t.type} class="interval-list">
          ${this._renderIntervalList({type:c,progressive:r,intervals:i,maxInterval:d})}
        </div>

        <div class="section-title section-title--subtotal">
          <div class="section-title-text">${m("cc-pricing-product-consumption.subtotal.title")}</div>
          <div class="section-title-price">
            ${m("cc-pricing-product-consumption.price",this._getCurrencyValue(u))}
          </div>
        </div>
      </div>
      <hr />
    `}_renderInput({type:t,quantity:i,unitValue:n}){return this._isTypeBytes(t)?e`
        <cc-input-number
          label=${m("cc-pricing-product-consumption.size",{bytes:Number(n)})}
          class="input-quantity"
          value=${i}
          min="0"
          @cc-input=${this._onInputValue(t)}
        ></cc-input-number>
        <cc-toggle
          legend=${m("cc-pricing-product-consumption.unit")}
          class="input-unit"
          value=${n}
          .choices=${this._getUnits()}
          @cc-select=${this._onToggleUnit(t)}
        ></cc-toggle>
      `:e`
        <cc-input-number
          label=${m("cc-pricing-product-consumption.quantity")}
          class="input-quantity"
          value=${i}
          min="0"
          @cc-input=${this._onInputValue(t)}
        ></cc-input-number>
      `}_renderIntervalList({type:t,progressive:i,intervals:r,maxInterval:c}){return r.map(((s,o)=>{const a=r.indexOf(c),l=s===c||i&&o<=a,p=this._getMinRange(t,s.minRange),u=this._getMaxRange(t,s.maxRange),d=this._getIntervalPrice(t,s.price),g=this._simulator.getIntervalPrice(t,o),v=m("cc-pricing-product-consumption.price",this._getCurrencyValue(g));return e`
        <div class="interval-line ${n({progressive:i,highlighted:l})}">
          <div class="interval interval-min">${p}</div>
          <div class="interval interval-min-sign">&le;</div>
          <div class="interval interval-label">${this._getLabel(t)}</div>
          <div class="interval interval-max-sign">&lt;</div>
          <div class="interval interval-max">${u}</div>
          <div class="interval-price ${n({"interval-price--free":0===s.price})}">
            ${d}
          </div>
          <div class="estimated-price">${v}</div>
        </div>
      `}))}static get styles(){return[i`
        :host {
          color: var(--cc-color-text-default, #000);
          display: block;
        }

        /* region COMMON */

        cc-notice {
          max-width: max-content;
        }

        cc-loader {
          min-height: 20em;
        }

        .body {
          align-items: center;
          display: grid;
          overflow: visible;
          white-space: nowrap;
        }

        /*
         * The correspondig HTML elements could be removed but they make it easier to understand how things are grouped and what they represent
         * when inspecting the source code in your editor or the browser devtools
         */
        .section,
        .section-header,
        .interval-line {
          display: contents;
        }

        hr {
          border-color: var(--cc-color-border-neutral-weak, #e5e5e5);
          border-style: solid;
          border-width: 1px 0 0;
          grid-column: 1 / -1;
          margin: 1em 0;
          width: 100%;
        }

        hr.last {
          margin-bottom: 0;
        }

        .section-icon {
          --cc-icon-color: var(--cc-color-text-primary, #000);
          --cc-icon-size: 1em;

          align-self: center;
          grid-column: section-icon / span 1;
          margin-right: 1em;
        }

        .section-icon.sum-icon {
          --cc-icon-size: 1.25em;
        }

        .section-title {
          align-self: center;
          display: flex;
          font-weight: bold;
          grid-column: title / title--end;
          justify-content: space-between;
        }

        .section-title.section-title--subtotal,
        .section-title.section-title--total {
          grid-column: title / title-total--end;
        }

        .section-title.section-title--subtotal {
          margin-top: 0.5em;
        }

        .section-title.section-title--subtotal .section-title-text {
          font-weight: normal;
        }

        .section-title-price {
          margin-left: 1em;
        }

        .input-wrapper {
          align-items: end;
          display: flex;
          grid-column: input-wrapper / input-wrapper--end;
          margin: 1em 0;
          width: 100%;
        }

        .input-quantity {
          flex: 1 1 0;
          min-width: 10ch;
        }

        .input-unit {
          --cc-toggle-text-transform: capitalize;

          margin-left: 0.5em;
        }

        .interval-list {
          display: contents;
        }

        .interval-line {
          --bdrs: var(--cc-border-radius-default, 0.25em);
        }

        .interval,
        .interval-price,
        .estimated-price {
          align-self: stretch;
          margin: 0.1em 0;
          padding-left: 0.5em;
          padding-top: 0.5em;
        }

        .interval {
          padding-bottom: 0.5em;
          padding-right: 0.5em;
        }

        .interval-line.highlighted:not(.progressive) .interval {
          background-color: var(--cc-color-bg-soft, #e5e5e5);
        }

        .interval-min,
        .interval-max,
        .interval-price {
          text-align: right;
        }

        .interval-min {
          border-radius: var(--bdrs) 0 0 var(--bdrs);
          grid-column: interval-min / span 1;
        }

        .interval-label {
          text-align: center;
        }

        .interval-price {
          align-self: center;
          color: var(--cc-color-text-weak, #333);
          font-style: italic;
          grid-column: interval-price / interval-price--end;
          padding-block: 0;
        }

        .interval-max {
          border-radius: 0 var(--bdrs) var(--bdrs) 0;
        }

        .estimated-price {
          font-weight: bold;
          text-align: right;
        }

        .interval-line:not(.highlighted) .estimated-price {
          visibility: hidden;
        }

        .button-bar {
          grid-column: start / end;
          margin-bottom: 1em;
        }

        /* endregion */

        /* region BIG */

        .body--big {
          grid-template-columns:
            [start section-icon] 1.5em
            [title input-wrapper interval-min] min-content
            [interval-min-sign] min-content
            [interval-label] min-content
            [interval-max-sign] min-content
            [interval-max] min-content
            [interval-price input-wrapper--end] min-content
            [estimated-price interval-price--end] min-content
            [title--end title-total--end] 1fr
            [end] 0;
        }

        .body--big .section-title--subtotal {
          display: none;
        }

        .body--big .section-toggle-btn {
          display: none;
        }

        .body--big .interval-label {
          text-align: center;
        }

        .body--big .interval-price {
          margin-left: 2em;
        }

        .body--big .estimated-price {
          grid-column: estimated-price / span 1;
          margin-left: 2em;
        }

        /* endregion */

        /* region SMALL */

        .body--small {
          grid-template-columns:
            [start section-icon] 1.5em
            [title input-wrapper interval-min interval-price] min-content
            [interval-min-sign] min-content
            [interval-label] min-content
            [interval-max-sign] min-content
            [interval-max toggle-btn title--end] min-content
            [input-wrapper--end interval-price--end title-total--end] 1fr
            [end];
        }

        .body--small .section--closed .interval,
        .body--small .section--closed .interval-price {
          height: 0;
          margin-bottom: 0;
          margin-top: 0;
          padding-bottom: 0;
          padding-top: 0;
          visibility: hidden;
        }

        .body--small .interval-price {
          margin-bottom: 1.5em;
        }

        .body--small .estimated-price {
          display: none;
        }

        .body--small .input-wrapper {
          margin-bottom: 0.5em;
        }

        .section-toggle-btn {
          align-items: center;
          background: transparent;
          border: none;
          color: var(--cc-color-text-primary-highlight, blue);
          display: flex;
          font-size: 1em;
          grid-column: input-wrapper / -1;
          margin-block: 0.5em;
          padding: 0;
        }

        .section-toggle-btn:hover {
          color: var(--cc-pricing-hovered-color, purple);
        }

        .expand-icon {
          --cc-icon-color: var(--cc-color-text-default, #000);
          --cc-icon-size: 1.5em;

          transform: rotate(0deg);
          transition: transform 0.2s ease;
        }

        .section:not(.section--closed) .expand-icon {
          transform: rotate(180deg);
          transition: transform 0.2s ease;
        }
        /* endregion */
      `]}}window.customElements.define("cc-pricing-product-consumption",b);export{b as CcPricingProductConsumption};
//# sourceMappingURL=cc-pricing-product-consumption.js.map
