import{__decorate as e}from"tslib";import{html as r}from"lit";import{property as t,customElement as i}from"lit/decorators.js";import{s}from"./nile-switcher.css.esm.js";import{N as n}from"../internal/nile-element.esm.js";import{choose as o}from"lit/directives/choose.js";import{classMap as l}from"lit/directives/class-map.js";import{repeat as a}from"lit/directives/repeat.js";import{w as c}from"../internal/watch.esm.js";import{H as d}from"../internal/slot.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";var h,p,u,$;!function(e){e.INLINE="inline",e.BLOCK="block"}(h||(h={})),function(e){e.DEFAULT="defaultInput",e.SWITCH="switchInput"}(p||(p={})),function(e){e.DROPDOWN="dropdown",e.TEXT="text",e.CHECKBOX="checkbox",e.TEXTAREA="text-area",e.RADIO="radio",e.CONTENTEDITOR="content-editor",e.OBJECT_MAPPER="object-mapper",e.CODE_EDITOR="code-editor"}(u||(u={})),function(e){e.CREATE="create",e.EDIT="edit"}($||($={}));let m=class extends n{constructor(){super(...arguments),this.hasSlotController=new d(this,"label"),this.current=0,this.isToggleSwitch=e=>void 0===e||e}connectedCallback(){super.connectedCallback(),this.emit("nile-init")}handleSwitcherChange(){this.setCurrentInput()}setCurrentInput(){this.nileSwitchConfig?.inputs&&(this.currentInput=this.nileSwitchConfig.inputs.filter(((e,r)=>r===this.current))[0])}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}renderNileText(e){const{value:t,label:i,placeholder:s,disabled:n,required:o,error:a,errorMessage:c,inputType:d,noborder:h}=e;return r`<nile-input
      class=${l({"switcher-input":!0,"switcher-input--noborder":!!h})}
      .value=${t}
      .label=${i}
      .disabled=${n}
      .required=${o}
      .errorMessage=${c}
      .placeholder=${s}
      .error=${a}
      @nile-input=${e=>{this.handleChange(e,d)}}
    ></nile-input>`}renderDropdown(e){const{options:t,multiple:i,placeholder:s,disabled:n,value:o,error:a,errorMessage:c,inputType:d,noborder:h}=e;return r`<nile-select
      part="dropdown"
      class=${l({"switcher-dropdown":!0,"switcher-dropdown--noborder":!!h})}
      .placeholder=${s}
      .disabled="${n}"
      .multiple="${i}"
      .value="${o}"
      .error="${a}"
      .errorMessage="${c}"
      @nile-change=${e=>{this.handleChange(e,d)}}
    >
      ${t?.map((e=>r`<nile-option .value="${e}">${e} </nile-option>`))}
    </nile-select>`}renderNileTextArea(e){const{value:t,disabled:i,readonly:s,errorMessage:n,error:o,inputType:l}=e;return r`<nile-textarea
      class="switcher-textarea"
      .value=${t}
      .disabled=${i}
      ?readonly=${s}
      .error=${o}
      .errorMessage=${n}
      @nile-input=${e=>{this.handleChange(e,l)}}
    ></nile-textarea>`}renderNileCheckBox(e){const{value:t,label:i,disabled:s,inputType:n}=e;return r`<nile-checkbox
        class="switcher-checkbox"
        .checked=${t}
        .label=${i}
        .disabled=${s}
        @valueChange=${e=>{this.handleChange(e,n)}}
      ></nile-checkbox
      >; `}renderNileRadio(e){const{options:t,value:i,disabled:s,errorMessage:n,inputType:o}=e,l=!!n;return r`<nile-radio-group
      class="switcher-radio-group"
      .value=${i}
      .disabled=${s}
      @change=${e=>{this.handleChange(e,o)}}
    >
      ${t&&t.map((e=>r`<nile-radio .value="${e}">${e} </nile-radio>`))}
      ${l?this.renderErrorMessage(n):""}
    </nile-radio-group> `}renderErrorMessage(e){return r`
      <nile-form-error-message>${e}</nile-form-error-message>
    `}renderContentEditor(e){let{options:t,inputType:i,errorMessage:s,type:n,readonly:o,noborder:l,value:a,updateValue:c}=e;return r`<nile-content-editor
      class="switcher-content-editor"
      .value=${a}
      .options=${t}
      .type=${n}
      .readonly=${o}
      .noborder=${l}
      .updateValue=${c}
      .errorMessage=${s}
      @nile-change=${e=>{this.handleChange(e,i)}}
    >
    </nile-content-editor>`}renderObjectMapper(e){let{options:t,inputType:i,error:s,errorMessage:n,type:o,readonly:a,noborder:c}=e;const d=this.currentInput.mode===$.CREATE?"Click to Create - Not Mapped":"Click to Edit";return r`<nile-input
      class=${l({"switcher-object-mapper":!0,"switcher-object-mapper--noborder":!!c})}
      .value=${d}
      .errorMessage=${n}
      .error=${s}
      readonly="true"
      @click="${e=>this.handleChange(e,u.OBJECT_MAPPER)}"
    >
      <nile-icon
        class="pointer-cursor switcher-object-mapper-icon"
        slot="suffix"
        name="var(--nile-icon-expand-2, var(--ng-icon-expand-06))"
        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
        color="var(--nile-colors-primary-600)"
        size="16"
      >
      </nile-icon>
    </nile-input>`}renderCodeEditor(e){const{value:t,multiLine:i,customAutoCompletions:s,disabled:n,readonly:o,errorMessage:a,error:c,inputType:d,noborder:h,expand:p,updateValue:$}=e;return r`<nile-code-editor
      part="switcher-code-editor"
      exportparts="code-editor-base"
      class=${l({"code-editor":!0})}
      @nile-expand="${e=>this.handleExpand(e,u.CODE_EDITOR)}"
      @nile-change="${e=>this.handleChange(e,u.CODE_EDITOR)}"
      .multiline="${i}"
      .value="${t}"
      .readonly=${o}
      .expandable="${p}"
      .error=${c}
      .noborder=${h}
      .updateValue=${$}
      .errorMessage=${a}
      .customAutoCompletions="${s}"
    ></nile-code-editor> `}handleExpand(e,r){this.currentInput.expand=e.detail.expand,this.emit("nile-change",{input:this.currentInput})}handleChange(e,r){switch(r){case u.OBJECT_MAPPER:this.currentInput.value="clicked";break;case u.CHECKBOX:this.currentInput.value=e.detail.checked;break;case u.CODE_EDITOR:default:this.currentInput.value=e.detail.value}e.stopPropagation(),this.emit("nile-change",{input:this.currentInput})}renderIcon(){const e=this.nileSwitchConfig.inputs,t=this.nileSwitchConfig.align===h.BLOCK?"top":"bottom";return r`
      <div part="icons-container" class="switcher-icons-container">
        ${a(e,((e,i)=>r` <nile-tooltip
            class=${l({"switcher-tooltip-container":!0})}
            content=${e.helperText}
            placement=${t}
          >
            <div  class=${l({"switcher-icon-container":!0,current:i===this.current})}>
               <nile-icon
              size="16"
              class=${l({"pointer-cursor":!0,"pointer-cursor-not-allowed":i===this.current})}
              .name=${e.icon}
              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
              color="#000000"
              @click=${()=>this.toggleField(e,i)}
            ></nile-icon>
            <div>
           
          </nile-tooltip>`))}
      </div>
    `}toggleField(e,r){this.emit("nile-switch",{inputClicked:r,currentInput:e})}singleFieldSwitcher(){return this.setCurrentInput(),r`
      ${o(this.currentInput.inputType,[[u.TEXT,()=>this.renderNileText(this.currentInput)],[u.CHECKBOX,()=>this.renderNileCheckBox(this.currentInput)],[u.TEXTAREA,()=>this.renderNileTextArea(this.currentInput)],[u.RADIO,()=>this.renderNileRadio(this.currentInput)],[u.DROPDOWN,()=>this.renderDropdown(this.currentInput)],[u.CONTENTEDITOR,()=>this.renderContentEditor(this.currentInput)],[u.OBJECT_MAPPER,()=>this.renderObjectMapper(this.currentInput)],[u.CODE_EDITOR,()=>this.renderCodeEditor(this.currentInput)]],(()=>this.renderNileText(this.currentInput)))}
    `}render(){const e=this.hasSlotController.test("label"),t=this.nileSwitchConfig.align,i=this.nileSwitchConfig.disable;return r`<div
      part="base"
      class=${l({"switcher-block":t===h.BLOCK,"switcher-inline":t===h.INLINE,"switcher-container":!0})}
    >
      <div class="label-container">
        ${e?r`
           <label
          part="switcher-label"
          class="switcher__label"
          for="input"
        >
          <slot name="label"></slot>
        </label>
          </div> `:""}
        ${i?"":r`${this.renderIcon()}`}
      </div>
      ${this.singleFieldSwitcher()}
    </div>`}};m.styles=s,e([t({type:Object})],m.prototype,"nileSwitchConfig",void 0),e([t({type:Number})],m.prototype,"current",void 0),e([t({type:Object})],m.prototype,"currentInput",void 0),e([c(["current"],{waitUntilFirstUpdate:!0})],m.prototype,"handleSwitcherChange",null),m=e([i("nile-switcher")],m);export{m as N};
