var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
// Lit
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
// Utilities
import { getKnobType } from '../utilities/utilities.js';
// Default values
import { DEFAULT_POPUP_STYLE } from '../constants/defaultValues.js';
// Components
import './knobs/switch.js';
import './knobs/number-date-time.js';
import './knobs/string.js';
import './knobs/select.js';
export class AnnotativeKnob extends LitElement {
    constructor() {
        super(...arguments);
        this.key = '';
        this.config = { type: 'string', value: '' };
        this.popupStyle = DEFAULT_POPUP_STYLE;
        this.onChange = (key, event) => { };
    }
    render() {
        const { isEditable, type, knob = '', value } = this.config;
        const knobType = getKnobType(type, knob);
        return html `<div>
      ${!isEditable
            ? ''
            : ['string'].includes(knobType)
                ? html `<annotative-code-knob-string
            .type=${knobType}
            .popupStyle=${this.popupStyle}
            .value=${value}
            .onChange=${(event) => this.onChange(this.key, event)}
          />`
                : [
                    'number',
                    'integer',
                    'date',
                    'time',
                    'datetime-local',
                    'range',
                ].includes(knobType)
                    ? html `<annotative-code-knob-number-date-time
            .type=${knobType}
            .config=${this.config}
            .popupStyle=${this.popupStyle}
            .value=${value}
            .onChange=${(event) => this.onChange(this.key, event)}
          />`
                    : ['boolean'].includes(knobType)
                        ? html `<annotative-code-knob-switch
            .config=${this.config}
            .checked=${value === true}
            .onChange=${(event) => this.onChange(this.key, event)}
          />`
                        : ['select'].includes(knobType)
                            ? html `<annotative-code-knob-select
            .config=${this.config}
            .popupStyle=${this.popupStyle}
            .value=${value}
            .onChange=${(event) => this.onChange(this.key, event)}
          />`
                            : ['color'].includes(knobType)
                                ? html `<input
            type="color"
            .value=${value}
            @change=${(event) => this.onChange(this.key, event)}
          />`
                                : ''}
    </div>`;
    }
}
AnnotativeKnob.styles = [];
__decorate([
    property({ attribute: 'key' })
], AnnotativeKnob.prototype, "key", void 0);
__decorate([
    property({ attribute: 'config' })
], AnnotativeKnob.prototype, "config", void 0);
__decorate([
    property({ attribute: 'popupStyle' })
], AnnotativeKnob.prototype, "popupStyle", void 0);
__decorate([
    property({ attribute: 'onChange' })
    // @ts-ignore
], AnnotativeKnob.prototype, "onChange", void 0);
customElements.get('annotative-code-knob') ||
    customElements.define('annotative-code-knob', AnnotativeKnob);
//# sourceMappingURL=knob.js.map