import"@shoelace-style/shoelace/dist/components/option/option.js";import"@shoelace-style/shoelace/dist/components/select/select.js";import{LitElement as e,html as t,css as o}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{ifDefined as r}from"lit/directives/if-defined.js";import{iconRemixArrowDownSLine as i}from"./assets/cc-remix.icons.js";import{getCurrencySymbol as s}from"./lib/utils.js";import{sortZones as l}from"./lib/zone.js";import{shoelaceStyles as n}from"./styles/shoelace.js";import{skeletonStyles as a}from"./styles/skeleton.js";import{i18n as p}from"./translation.js";import"./cc-icon.js";import"./cc-notice.js";import{CcPricingCurrencyChangeEvent as d,CcPricingTemporalityChangeEvent as u,CcPricingZoneChangeEvent as m}from"./components/cc-pricing-page/cc-pricing-page.events.js";import{CcZone as h}from"./cc-zone.js";const g={type:"30-days",digits:2};class b extends e{static get properties(){return{currencies:{type:Array},selectedCurrency:{type:String,attribute:"selected-currency"},selectedTemporality:{type:Object,attribute:"selected-temporality"},selectedZoneId:{type:String,attribute:"selected-zone-id"},state:{type:Object},temporalities:{type:Array}}}constructor(){super(),this.currencies=["EUR"],this.selectedCurrency="EUR",this.selectedTemporality=g,this.selectedZoneId=null,this.temporalities=[g],this.state={type:"loading"}}_getPriceLabel(e){switch(e){case"second":return p("cc-pricing-header.price-name.second");case"minute":return p("cc-pricing-header.price-name.minute");case"hour":return p("cc-pricing-header.price-name.hour");case"1000-minutes":return p("cc-pricing-header.price-name.1000-minutes");case"day":return p("cc-pricing-header.price-name.day");case"30-days":return p("cc-pricing-header.price-name.30-days")}}_onCurrencyChange(e){this.selectedCurrency=e.target.value,this.dispatchEvent(new d(this.selectedCurrency))}_onTemporalityChange(e){const t=this.temporalities.find((t=>t.type===e.target.value));this.dispatchEvent(new u(t))}_onZoneChange(e){const t=e.target.value;this.dispatchEvent(new m(t))}render(){const e="loaded"===this.state.type?l(this.state.zones):[],o="loading"===this.state.type;return"error"===this.state.type?t`<cc-notice intent="warning" message="${p("cc-pricing-header.error")}"></cc-notice>`:t`
      <div class="main">
        <sl-select
          label="${p("cc-pricing-header.label.temporality")}"
          class="temporality-select"
          value=${this.selectedTemporality.type}
          @sl-change=${this._onTemporalityChange}
        >
          ${this.temporalities.map((e=>t`
              <sl-option
                ?disabled=${o&&this.selectedTemporality.type!==e.type}
                value=${e.type}
                >${this._getPriceLabel(e.type)}</sl-option
              >
            `))}
          <cc-icon slot="expand-icon" .icon=${i}></cc-icon>
        </sl-select>

        <sl-select
          label="${p("cc-pricing-header.label.currency")}"
          class="currency-select"
          value=${this.selectedCurrency}
          @sl-change=${this._onCurrencyChange}
        >
          ${this.currencies.map((e=>t`
              <sl-option ?disabled=${o&&this.selectedCurrency!==e} value=${e}
                >${s(e)} ${e}</sl-option
              >
            `))}
          <cc-icon slot="expand-icon" .icon=${i}></cc-icon>
        </sl-select>

        <sl-select
          label="${p("cc-pricing-header.label.zone")}"
          class="zone-select ${c({skeleton:o})}"
          hoist
          value=${r(this.selectedZoneId??void 0)}
          ?disabled=${o}
          @sl-change=${this._onZoneChange}
        >
          ${e.map((e=>t`
              <sl-option
                ?disabled=${o&&this.selectedZoneId!==e.name}
                class="zone-item"
                value=${e.name}
              >
                ${h.getText(e)}
                <cc-zone slot="prefix" .state=${{type:"loaded",...e}}></cc-zone>
              </sl-option>
            `))}
          <cc-icon slot="expand-icon" .icon=${i}></cc-icon>
        </sl-select>
      </div>
    `}static get styles(){return[n,a,o`
        :host {
          display: block;
        }

        .main {
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        sl-select {
          --cc-icon-size: 1.4em;
          --sl-input-background-color: var(--cc-color-bg-default, #fff);
          --sl-input-background-color-disabled: var(--cc-color-bg-neutral-disabled, #eee);
          --sl-input-background-color-hover: var(--cc-color-bg-default, #fff);
          --sl-input-background-color-focus: var(--cc-color-bg-default, #fff);
          --sl-input-border-color: var(--cc-color-border-neutral-weak, #aaa);
          --sl-input-border-color-disabled: var(--cc-color-border-disabled, #eee);
          --sl-input-border-color-focus: var(--cc-color-border-focused, #777);
          --sl-input-border-radius-medium: var(--cc-border-radius-default, 0.25em);
          --sl-input-color: var(--cc-color-text-default, #000);
          --sl-input-color-hover: var(--cc-pricing-hovered-color, #000);
          --sl-input-font-family: initial;
          --sl-input-height-medium: 2.865em;
          --sl-input-label-color: var(--cc-color-text-default, #000);

          animation: none;
          flex: 1 1 10.5em;
        }

        sl-select::part(form-control-input):focus-within {
          outline: var(--cc-focus-outline, #000);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        sl-select::part(form-control-label) {
          /* same value as out own inputs */
          padding-bottom: 0.35em;
        }

        sl-select::part(display-input) {
          font-family: inherit;
          font-weight: bold;
        }

        sl-select::part(combobox) {
          padding: 0.75rem 0.875rem;
        }

        sl-select::part(combobox):hover {
          --cc-icon-color: var(--cc-pricing-hovered-color);

          border: 1px solid var(--cc-color-border-hovered, #777);
        }

        sl-option::part(base) {
          background-color: transparent;
          color: var(--cc-color-text-default, #000);
        }

        sl-option::part(base):hover,
        sl-option:focus-within {
          background-color: var(--cc-color-bg-neutral-hovered, #eee);
        }

        sl-option::part(checked-icon) {
          height: 0.7em;
          margin-right: 0.5em;
          width: 0.7em;
        }

        /* region Zone select */

        sl-select.skeleton::part(base) {
          --sl-input-background-color-disabled: var(--cc-color-bg-neutral-disabled, #bbb);
        }

        .zone-select {
          flex: 2 1 auto;
        }

        /* The label is not used in the list display
  It's only used for the current selected value */

        sl-option.zone-item::part(label) {
          display: none;
        }

        /* Expand the cc-zone to the whole width */

        sl-option.zone-item::part(prefix) {
          display: block;
          flex: 1 1 0;
        }

        sl-option.zone-item::part(base) {
          --cc-zone-tag-category-font-weight: 600;
          --cc-zone-tag-padding: 0;
          --cc-zone-tag-bgcolor: transparent;
          --cc-zone-tag-textcolor: var(--cc-color-text-weak, #333);

          border-bottom: solid 1px var(--cc-color-border-neutral-weak, transparent);
          padding: 1em 0.5em;
        }

        sl-option.zone-item::part(checked-icon) {
          align-self: flex-start;
          margin-top: 0.3em;
        }
        /* endregion */
      `]}}window.customElements.define("cc-pricing-header",b);export{b as CcPricingHeader};
//# sourceMappingURL=cc-pricing-header.js.map
