/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-switcher.css';
import NileElement from '../internal/nile-element';
import { choose } from 'lit/directives/choose.js';
import { classMap } from 'lit/directives/class-map.js';
import { repeat } from 'lit/directives/repeat.js';
import { watch } from '../internal/watch';
import { HasSlotController } from '../internal/slot';
export var POSITIONS;
(function (POSITIONS) {
    POSITIONS["INLINE"] = "inline";
    POSITIONS["BLOCK"] = "block";
})(POSITIONS || (POSITIONS = {}));
export var INPUT_TYPE;
(function (INPUT_TYPE) {
    INPUT_TYPE["DEFAULT"] = "defaultInput";
    INPUT_TYPE["SWITCH"] = "switchInput";
})(INPUT_TYPE || (INPUT_TYPE = {}));
export var INPUT_TYPE_NAMES;
(function (INPUT_TYPE_NAMES) {
    INPUT_TYPE_NAMES["DROPDOWN"] = "dropdown";
    INPUT_TYPE_NAMES["TEXT"] = "text";
    INPUT_TYPE_NAMES["CHECKBOX"] = "checkbox";
    INPUT_TYPE_NAMES["TEXTAREA"] = "text-area";
    INPUT_TYPE_NAMES["RADIO"] = "radio";
    INPUT_TYPE_NAMES["CONTENTEDITOR"] = "content-editor";
    INPUT_TYPE_NAMES["OBJECT_MAPPER"] = "object-mapper";
    INPUT_TYPE_NAMES["CODE_EDITOR"] = "code-editor";
})(INPUT_TYPE_NAMES || (INPUT_TYPE_NAMES = {}));
export var MODE;
(function (MODE) {
    MODE["CREATE"] = "create";
    MODE["EDIT"] = "edit";
})(MODE || (MODE = {}));
let NileSwitcher = class NileSwitcher extends NileElement {
    constructor() {
        super(...arguments);
        this.hasSlotController = new HasSlotController(this, 'label');
        this.current = 0;
        this.isToggleSwitch = (item) => {
            return typeof item === 'undefined' || item;
        };
    }
    connectedCallback() {
        super.connectedCallback();
        this.emit('nile-init');
    }
    handleSwitcherChange() {
        this.setCurrentInput();
    }
    setCurrentInput() {
        if (this.nileSwitchConfig?.inputs) {
            this.currentInput = this.nileSwitchConfig.inputs.filter((input, index) => {
                return index === this.current;
            })[0];
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.emit('nile-destroy');
    }
    renderNileText(Input) {
        const { value, label, placeholder, disabled, required, error, errorMessage, inputType, noborder, } = Input;
        return html `<nile-input
      class=${classMap({
            'switcher-input': true,
            'switcher-input--noborder': !!noborder,
        })}
      .value=${value}
      .label=${label}
      .disabled=${disabled}
      .required=${required}
      .errorMessage=${errorMessage}
      .placeholder=${placeholder}
      .error=${error}
      @nile-input=${(e) => {
            this.handleChange(e, inputType);
        }}
    ></nile-input>`;
    }
    renderDropdown(Input) {
        const { options, multiple, placeholder, disabled, value, error, errorMessage, inputType, noborder, } = Input;
        return html `<nile-select
      part="dropdown"
      class=${classMap({
            'switcher-dropdown': true,
            'switcher-dropdown--noborder': !!noborder,
        })}
      .placeholder=${placeholder}
      .disabled="${disabled}"
      .multiple="${multiple}"
      .value="${value}"
      .error="${error}"
      .errorMessage="${errorMessage}"
      @nile-change=${(e) => {
            this.handleChange(e, inputType);
        }}
    >
      ${options?.map((option) => {
            return html `<nile-option .value="${option}">${option} </nile-option>`;
        })}
    </nile-select>`;
    }
    renderNileTextArea(Input) {
        const { value, disabled, readonly, errorMessage, error, inputType } = Input;
        return html `<nile-textarea
      class="switcher-textarea"
      .value=${value}
      .disabled=${disabled}
      ?readonly=${readonly}
      .error=${error}
      .errorMessage=${errorMessage}
      @nile-input=${(e) => {
            this.handleChange(e, inputType);
        }}
    ></nile-textarea>`;
    }
    renderNileCheckBox(Input) {
        const { value, label, disabled, inputType } = Input;
        return html `<nile-checkbox
        class="switcher-checkbox"
        .checked=${value}
        .label=${label}
        .disabled=${disabled}
        @valueChange=${(e) => {
            this.handleChange(e, inputType);
        }}
      ></nile-checkbox
      >; `;
    }
    renderNileRadio(Input) {
        const { options, value, disabled, errorMessage, inputType } = Input;
        const haserrorMessage = !!errorMessage;
        return html `<nile-radio-group
      class="switcher-radio-group"
      .value=${value}
      .disabled=${disabled}
      @change=${(e) => {
            this.handleChange(e, inputType);
        }}
    >
      ${options &&
            options.map((option) => {
                return html `<nile-radio .value="${option}">${option} </nile-radio>`;
            })}
      ${haserrorMessage ? this.renderErrorMessage(errorMessage) : ''}
    </nile-radio-group> `;
    }
    renderErrorMessage(errorMessage) {
        return html `
      <nile-form-error-message>${errorMessage}</nile-form-error-message>
    `;
    }
    renderContentEditor(Input) {
        let { options, inputType, errorMessage, type, readonly, noborder, value, updateValue, } = Input;
        return html `<nile-content-editor
      class="switcher-content-editor"
      .value=${value}
      .options=${options}
      .type=${type}
      .readonly=${readonly}
      .noborder=${noborder}
      .updateValue=${updateValue}
      .errorMessage=${errorMessage}
      @nile-change=${(e) => {
            this.handleChange(e, inputType);
        }}
    >
    </nile-content-editor>`;
    }
    renderObjectMapper(Input) {
        let { options, inputType, error, errorMessage, type, readonly, noborder } = Input;
        const value = this.currentInput.mode === MODE.CREATE
            ? 'Click to Create - Not Mapped'
            : 'Click to Edit';
        return html `<nile-input
      class=${classMap({
            'switcher-object-mapper': true,
            'switcher-object-mapper--noborder': !!noborder,
        })}
      .value=${value}
      .errorMessage=${errorMessage}
      .error=${error}
      readonly="true"
      @click="${(e) => this.handleChange(e, INPUT_TYPE_NAMES.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(Input) {
        const { value, multiLine, customAutoCompletions, disabled, readonly, errorMessage, error, inputType, noborder, expand, updateValue, } = Input;
        return html `<nile-code-editor
      part="switcher-code-editor"
      exportparts="code-editor-base"
      class=${classMap({
            'code-editor': true,
        })}
      @nile-expand="${(e) => this.handleExpand(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
      @nile-change="${(e) => this.handleChange(e, INPUT_TYPE_NAMES.CODE_EDITOR)}"
      .multiline="${multiLine}"
      .value="${value}"
      .readonly=${readonly}
      .expandable="${expand}"
      .error=${error}
      .noborder=${noborder}
      .updateValue=${updateValue}
      .errorMessage=${errorMessage}
      .customAutoCompletions="${customAutoCompletions}"
    ></nile-code-editor> `;
    }
    handleExpand(event, inputType) {
        this.currentInput.expand = event.detail.expand;
        this.emit('nile-change', { input: this.currentInput });
    }
    handleChange(event, inputType) {
        switch (inputType) {
            case INPUT_TYPE_NAMES.OBJECT_MAPPER:
                this.currentInput.value = 'clicked';
                break;
            case INPUT_TYPE_NAMES.CHECKBOX:
                this.currentInput.value = event.detail.checked;
                break;
            case INPUT_TYPE_NAMES.CODE_EDITOR:
                this.currentInput.value = event.detail.value;
                break;
            default:
                this.currentInput.value = event.detail.value;
        }
        event.stopPropagation();
        this.emit('nile-change', { input: this.currentInput });
    }
    renderIcon() {
        const inputs = this.nileSwitchConfig.inputs;
        const toolTipPosition = this.nileSwitchConfig.align === POSITIONS.BLOCK ? 'top' : 'bottom';
        return html `
      <div part="icons-container" class="switcher-icons-container">
        ${repeat(inputs, (input, index) => html ` <nile-tooltip
            class=${classMap({
            'switcher-tooltip-container': true,
        })}
            content=${input.helperText}
            placement=${toolTipPosition}
          >
            <div  class=${classMap({
            'switcher-icon-container': true,
            current: index === this.current,
        })}>
               <nile-icon
              size="16"
              class=${classMap({
            'pointer-cursor': true,
            'pointer-cursor-not-allowed': index === this.current,
        })}
              .name=${input.icon}
              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
              color="#000000"
              @click=${() => this.toggleField(input, index)}
            ></nile-icon>
            <div>
           
          </nile-tooltip>`)}
      </div>
    `;
    }
    toggleField(currentInput, index) {
        this.emit('nile-switch', {
            inputClicked: index,
            currentInput: currentInput,
        });
    }
    singleFieldSwitcher() {
        this.setCurrentInput();
        return html `
      ${choose(this.currentInput.inputType, [
            [INPUT_TYPE_NAMES.TEXT, () => this.renderNileText(this.currentInput)],
            [
                INPUT_TYPE_NAMES.CHECKBOX,
                () => this.renderNileCheckBox(this.currentInput),
            ],
            [
                INPUT_TYPE_NAMES.TEXTAREA,
                () => this.renderNileTextArea(this.currentInput),
            ],
            [
                INPUT_TYPE_NAMES.RADIO,
                () => this.renderNileRadio(this.currentInput),
            ],
            [
                INPUT_TYPE_NAMES.DROPDOWN,
                () => this.renderDropdown(this.currentInput),
            ],
            [
                INPUT_TYPE_NAMES.CONTENTEDITOR,
                () => this.renderContentEditor(this.currentInput),
            ],
            [
                INPUT_TYPE_NAMES.OBJECT_MAPPER,
                () => this.renderObjectMapper(this.currentInput),
            ],
            [
                INPUT_TYPE_NAMES.CODE_EDITOR,
                () => this.renderCodeEditor(this.currentInput),
            ],
        ], () => this.renderNileText(this.currentInput))}
    `;
    }
    render() {
        const hasLabelSlot = this.hasSlotController.test('label');
        const align = this.nileSwitchConfig.align;
        const disable = this.nileSwitchConfig.disable;
        return html `<div
      part="base"
      class=${classMap({
            'switcher-block': align === POSITIONS.BLOCK,
            'switcher-inline': align === POSITIONS.INLINE,
            'switcher-container': true,
        })}
    >
      <div class="label-container">
        ${hasLabelSlot
            ? html `
           <label
          part="switcher-label"
          class="switcher__label"
          for="input"
        >
          <slot name="label"></slot>
        </label>
          </div> `
            : ''}
        ${!disable ? html `${this.renderIcon()}` : ''}
      </div>
      ${this.singleFieldSwitcher()}
    </div>`;
    }
};
/**
 * The styles for nile switcher
 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
 */
NileSwitcher.styles = styles;
__decorate([
    property({ type: Object })
], NileSwitcher.prototype, "nileSwitchConfig", void 0);
__decorate([
    property({ type: Number })
], NileSwitcher.prototype, "current", void 0);
__decorate([
    property({ type: Object })
], NileSwitcher.prototype, "currentInput", void 0);
__decorate([
    watch(['current'], { waitUntilFirstUpdate: true })
], NileSwitcher.prototype, "handleSwitcherChange", null);
NileSwitcher = __decorate([
    customElement('nile-switcher')
], NileSwitcher);
export { NileSwitcher };
export default NileSwitcher;
//# sourceMappingURL=nile-switcher.js.map