import{LitElement as e,html as t,css as r}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{iconRemixAddLine as i}from"./assets/cc-remix.icons.js";import{ResizeController as n}from"./controllers/resize-controller.js";import{accessibilityStyles as a}from"./styles/accessibility.js";import{i18n as o}from"./translation.js";import"./cc-icon.js";import"./cc-loader.js";import"./cc-notice.js";import{CcPricingPlanAddEvent as s}from"./components/cc-pricing-page/cc-pricing-page.events.js";const d={"connection-limit":()=>o("cc-pricing-product.feature.connection-limit"),cpu:()=>o("cc-pricing-product.feature.cpu"),databases:()=>o("cc-pricing-product.feature.databases"),dedicated:()=>o("cc-pricing-product.feature.dedicated"),"disk-size":()=>o("cc-pricing-product.feature.disk-size"),gpu:()=>o("cc-pricing-product.feature.gpu"),"has-logs":()=>o("cc-pricing-product.feature.has-logs"),"has-metrics":()=>o("cc-pricing-product.feature.has-metrics"),"is-migratable":()=>o("cc-pricing-product.feature.is-migratable"),"max-db-size":()=>o("cc-pricing-product.feature.max-db-size"),memory:()=>o("cc-pricing-product.feature.memory"),version:()=>o("cc-pricing-product.feature.version")},l=Object.keys(d),u=["bytes","number","number-cpu-runtime"],p=[{type:"30-days",digits:2}];class m extends e{static get properties(){return{action:{type:String},currency:{type:String},state:{type:Object},temporalities:{type:Array}}}constructor(){super(),this.action="add",this.currency="EUR",this.state={type:"loading"},this.temporalities=p,this._resizeController=new n(this)}_getFeatureName(e){return null==e?"":e.code in d?d[e.code]():null!=e.name?e.name:void 0}_getFeatureValue(e){if(null==e)return"";switch(e.type){case"boolean":return o("cc-pricing-product.type.boolean",{boolean:"true"===e.value});case"boolean-shared":return o("cc-pricing-product.type.boolean-shared",{shared:"shared"===e.value});case"bytes":return"memory"===e.code&&"0"===e.value?o("cc-pricing-product.type.boolean-shared",{shared:!0}):o("cc-pricing-product.type.bytes",{bytes:Number(e.value)});case"number":return"cpu"===e.code&&"0"===e.value?o("cc-pricing-product.type.boolean-shared",{shared:!0}):o("cc-pricing-product.type.number",{number:Number(e.value)});case"number-cpu-runtime":return o("cc-pricing-product.type.number-cpu-runtime",{cpu:e.value.cpu,shared:e.value.shared});case"string":return e.value.toString()}}_getPrice(e,t){switch(e){case"second":return t/60/60;case"minute":return t/60;case"hour":return t;case"1000-minutes":return t/60*1e3;case"day":return 24*t;case"30-days":return 24*t*30}}_getPriceLabel(e){switch(e){case"second":return o("cc-pricing-product.price-name.second");case"minute":return o("cc-pricing-product.price-name.minute");case"hour":return o("cc-pricing-product.price-name.hour");case"1000-minutes":return o("cc-pricing-product.price-name.1000-minutes");case"day":return o("cc-pricing-product.price-name.day");case"30-days":return o("cc-pricing-product.price-name.30-days")}}_getPriceValue(e,t,r){const c=this._getPrice(e,t);if(null!=c)return o("cc-pricing-product.price",{price:c,currency:this.currency,digits:r})}_onAddPlan(e,t){this.dispatchEvent(new s({productName:e,...t}))}render(){return t`
      ${"error"===this.state.type?t` <cc-notice intent="warning" message=${o("cc-pricing-product.error")}></cc-notice> `:""}
      ${"loading"===this.state.type?t` <cc-loader></cc-loader> `:""}
      ${"loaded"===this.state.type?this._renderProductPlans(this.state.name,this.state.plans,this.state.productFeatures):""}
    `}_renderProductPlans(e,t,r){const c=[...t].sort(((e,t)=>e.price-t.price)),i=r.filter((e=>l.includes(e.code)||null!=e.name));return this._resizeController.width>800?this._renderBigPlans(e,c,i):this._renderSmallPlans(e,c,i)}_renderBigPlans(e,r,n){const a=this.temporalities??p;return t`
      <table>
        <caption class="visually-hidden">
          ${e}
        </caption>
        <thead>
          <tr>
            <th>${o("cc-pricing-product.plan")}</th>
            ${n.map((e=>t`
                <th class=${c({"number-align":u.includes(e.type)})}>
                  ${this._getFeatureName(e)}
                </th>
              `))}
            ${a.map((({type:e})=>t` <th class="number-align">${this._getPriceLabel(e)}</th> `))}
            ${"add"===this.action?t` <th class="btn-col"></th> `:""}
          </tr>
        </thead>
        <tbody>
          ${r.map((r=>t`
              <tr>
                <td>${r.name}</td>
                ${this._renderBigPlanFeatures(r.features,n)}
                ${a.map((({type:e,digits:c})=>t`
                    <td class="number-align">${this._getPriceValue(e,r.price,c)}</td>
                  `))}
                ${"add"===this.action?t`
                      <td class="btn-col">
                        <button
                          class="btn"
                          @click="${()=>this._onAddPlan(e,r)}"
                          title="${o("cc-pricing-product.add-button",{productName:e,size:r.name})}"
                        >
                          <cc-icon
                            .icon=${i}
                            a11y-name=${o("cc-pricing-product.add-button",{productName:e,size:r.name})}
                          ></cc-icon>
                        </button>
                      </td>
                    `:""}
              </tr>
            `))}
        </tbody>
      </table>
    `}_renderBigPlanFeatures(e,r){return r.map((r=>{const i=e.find((e=>r.code===e.code));return t`
        <td class=${c({"number-align":u.includes(r.type)})}>
          ${this._getFeatureValue(i)}
        </td>
      `}))}_renderSmallPlans(e,r,c){const n=this.temporalities??p;return t`
      <div>
        <div class="visually-hidden">${e}</div>
        ${r.map((r=>t`
            <div class="plan">
              <div class="plan-name">
                <span>${r.name}</span>
                ${"add"===this.action?t`
                      <button
                        class="btn"
                        @click="${()=>this._onAddPlan(e,r)}"
                        title="${o("cc-pricing-product.add-button",{productName:e,size:r.name})}"
                      >
                        <cc-icon
                          .icon=${i}
                          a11y-name=${o("cc-pricing-product.add-button",{productName:e,size:r.name})}
                        ></cc-icon>
                      </button>
                    `:""}
              </div>

              <dl class="feature-list">
                ${this._renderSmallPlanFeatures(r.features,c)}
                ${n.map((({type:e,digits:c})=>t`
                    <div class="price-small">
                      <dt class="feature-name">${this._getPriceLabel(e)}</dt>
                      <dd class="feature-value">${this._getPriceValue(e,r.price,c)}</dd>
                    </div>
                  `))}
              </dl>
            </div>
          `))}
      </div>
    `}_renderSmallPlanFeatures(e,r){return r.map((r=>{const c=e.find((e=>r.code===e.code));return t`
        <div>
          <dt class="feature-name">${this._getFeatureName(c)}</dt>
          <dd class="feature-value">${this._getFeatureValue(c)}</dd>
        </div>
      `}))}static get styles(){return[a,r`
        :host {
          display: block;
        }

        button:focus {
          outline: var(--cc-focus-outline, #000);
          outline-offset: var(--cc-focus-outline-offset);
        }

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

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

        /* region pricing table */
        /* region COMMON */

        .number-align {
          text-align: right;
        }

        /* this selector applies to content coming from the translation files */

        em[title] {
          cursor: help;
          font-style: normal;
          position: relative;
        }

        /* this selector applies to content coming from the translation files. */

        em[title] code {
          color: var(--cc-color-text-primary-highlight, blue);
          font-family: monospace;
          font-weight: bold;
        }

        .btn {
          background-color: var(--cc-color-bg-default, #fff);
          border: solid 1px var(--cc-color-border-neutral-strong, #eee);
          color: var(--cc-color-text-weak, #333);
          cursor: pointer;
          display: grid;
          font-size: 1.2em;
          height: 1.5em;
          line-height: 1.2em;
          place-content: center;
          width: 1.5em;
        }

        .btn:hover {
          --cc-icon-color: var(--cc-pricing-hovered-color);

          border-color: var(--cc-color-border-hovered);
        }

        /* endregion */

        /* region BIG */

        table {
          border-collapse: collapse;
          border-spacing: 0;
          width: 100%;
        }

        /* Fix to prevent position absolute from breaking border collapse between thead and tbody */

        caption.visually-hidden {
          position: static;
        }

        tr {
          border-block: solid 1px var(--cc-color-border-neutral-weak, #eee);
        }

        th {
          color: var(--cc-color-text-weak, #333);
          font-weight: bold;
          padding: 2em 0.5em;
          text-align: left;
        }

        th.btn-col,
        td.btn-col {
          width: 2em;
        }

        td {
          color: var(--cc-color-text-default, #000);
          font-weight: 500;
          padding: 1.5em 0.5em;
          white-space: nowrap;
        }

        td.btn-col {
          padding: 0.25em 1em;
        }

        tr:hover td {
          background-color: var(--cc-color-bg-neutral-hovered, #f5f5f5);
        }

        .price-col {
          padding: 0;
        }

        table em[title] code {
          box-sizing: border-box;
          left: 100%;
          padding: 0 0.15em;
          position: absolute;
        }

        /* endregion */

        /* region SMALL */

        .plan {
          border-bottom: 1px solid var(--cc-color-border-neutral-weak, #ddd);
          margin: 0;
          padding: 1em;
        }

        .plan-name {
          display: flex;
          font-size: 1.2em;
          font-weight: bold;
          justify-content: space-between;
          margin-bottom: 1em;
        }

        .feature-list {
          display: grid;
          gap: 1em;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        }

        dl,
        dd,
        dt {
          margin: 0;
          padding: 0;
        }

        dd {
          color: var(--cc-color-text-default, #000);
          font-weight: 500;
        }

        dt {
          color: var(--cc-color-text-weak);
          font-weight: 600;
        }
        /*  endregion */
      `]}}window.customElements.define("cc-pricing-product",m);export{m as CcPricingProduct};
//# sourceMappingURL=cc-pricing-product.js.map
