import{html as e,css as n}from"lit";import{iconRemixServerLine as t}from"./assets/cc-remix.icons.js";import{C as l}from"./form-utils-4685920e.js";import{i18n as a}from"./i18n.js";import"./cc-badge.js";import"./cc-picker.js";import{CcSelectEvent as i}from"./components/common.events.js";class r extends l{static get properties(){return{...super.properties,legend:{type:String},plans:{type:Array},readonly:{type:Boolean},value:{type:String}}}constructor(){super(),this.legend=null,this.plans=[],this.readonly=!1,this.value=null,this._currentPlanId=null,this._currentRelatedPlans=[]}set errorMessage(e){}_findPlan(e,n){const t=e.find((e=>null==e.relatedPlans||0===e.relatedPlans.length?e.id===n:e.relatedPlans.find((e=>e.id===n))));if(null!=t)return t;const l=this.plans.find((e=>e.id===n));return null!=l?l:e[0]}_onChangePlan(e){if(this.readonly)return;const n=this._findPlan(this.plans,e.target.value);this._currentPlanId=e.target.value,null!=n.relatedPlans&&n.relatedPlans.length>0?(this.value=n.relatedPlans[0].id,this._currentRelatedPlans=n.relatedPlans):(this.value=this._currentPlanId,this._currentRelatedPlans=[]),this.dispatchEvent(new i(this.value))}_onChangeRelatedPlan(e){this.readonly||(this.value=e.target.value,this.dispatchEvent(new i(this.value)))}willUpdate(e){if(e.has("plans")&&e.has("value")){const e=this._findPlan(this.plans,this.value);if(null!=e.relatedPlans&&e.relatedPlans.length>0){const n=e.relatedPlans.some((e=>e.id===this.value));this.value=n?this.value:e.relatedPlans[0].id}else this.value=e.id;this._currentPlanId=e.id,this._currentRelatedPlans=e.relatedPlans}}render(){return e`
      <div class="picker-wrapper">
        <cc-icon .icon="${t}" size="lg"></cc-icon>
        ${this._renderPlans({plans:this.plans,name:this.name,value:this._currentPlanId,legend:this.legend??a("cc-plan-picker.legend"),inputFn:this._onChangePlan})}
      </div>
      ${null!=this._currentRelatedPlans&&this._currentRelatedPlans.length>0?e`<div class="picker-wrapper">
            <cc-icon .icon="${t}" size="lg"></cc-icon>
            ${this._renderPlans({plans:this._currentRelatedPlans,name:"related-plan",value:this.value,legend:a("cc-plan-picker.legend.customize"),inputFn:this._onChangeRelatedPlan})}
          </div>`:""}
    `}_renderPlans({inputFn:n,legend:t,name:l,plans:a,value:i}){const r=a.map((e=>({body:this._renderOptionBody(e.name,e.badge),disabled:e.disabled,footer:this._renderOptionFooter(e.details),value:e.id})));return e`<cc-picker
      @input="${n}"
      label="${t}"
      name=${l}
      .options=${r}
      ?readonly=${this.readonly}
      value=${i}
    ></cc-picker>`}_renderOptionBody(n,t){return e`
      <div part="option-body">
        <span part="option-body--name">${n}</span>
        ${null!=t?e` <cc-badge .intent="${t.intent}" part="option-body--badge">${t.content}</cc-badge> `:""}
      </div>
    `}_renderOptionFooter(n){return 0===n?.length?null:e`
      <ul part="option-footer">
        ${n.map((n=>e`<li part="option-footer--detail">
            <cc-icon .icon="${n.icon}" size="md"></cc-icon>
            <span>${n.value}</span>
          </li>`))}
      </ul>
    `}static get styles(){return[n`
        /* region global */
        :host {
          display: block;
        }
        /* endregion */

        /* region cc-picker global layout & style */
        .picker-wrapper {
          column-gap: 0.25em;
          display: flex;
        }

        .picker-wrapper cc-icon {
          --cc-icon-color: var(--cc-color-text-primary);

          flex: 0 0 auto;
          padding-block: 0.25em;
        }

        .picker-wrapper cc-picker {
          flex: 1 1 auto;
        }

        .picker-wrapper + .picker-wrapper {
          margin-block-start: var(--cc-form-controls-gap, 2em);
        }

        cc-picker {
          --cc-input-label-color: var(--cc-color-text-primary-strongest, #012a51);
          --cc-input-label-font-size: 1.625em;
          --cc-input-label-font-weight: 500;
          --cc-picker-tiles-width: 100%;

          display: block;
          font-family: var(--cc-ff-form-legend), inherit;
        }

        cc-picker::part(tiles) {
          display: grid;
          gap: 1em;
          grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
        }
        /* endregion */

        /* region cc-picker-option slotted content */
        ::part(option-body) {
          align-items: center;
          column-gap: 0.375em;
          display: inline-flex;
          flex-wrap: wrap;
        }

        ::part(option-body--name) {
          font-size: 1.25em;
        }

        ::part(option-body--badge) {
          line-height: normal;
        }

        ::part(option-footer) {
          display: flex;
          flex-direction: column;
          list-style-type: none;
          margin: 0;
          padding: 0;
          row-gap: 0.25em;
        }

        ::part(option-footer--detail) {
          align-items: center;
          column-gap: 0.5em;
          display: inline-flex;
        }
        /* endregion */
      `]}}window.customElements.define("cc-plan-picker",r);export{r as CcPlanPicker};
//# sourceMappingURL=cc-plan-picker.js.map
