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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _DevvitFormSelectionList_config, _DevvitFormSelectionList_selection, _DevvitFormSelectionList_updateSelection;
import '@reddit/faceplate-ui/components/faceplate-checkbox-input.js';
import '@reddit/faceplate-ui/components/faceplate-radio-input.js';
import { FieldConfig_Selection } from '@devvit/protos/types/devvit/ui/form_builder/v1alpha/field.js';
import { FormFieldValue_SelectionValue } from '@devvit/protos/types/devvit/ui/form_builder/v1alpha/value.js';
import { InputElement } from '@reddit/faceplate/base-classes/input-element.js';
import { html, repeat } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
import { property } from 'lit/decorators.js';
import { styles } from '../../../styles.js';
import { renderFieldLabel } from '../fields/renderFieldLabel.js';
export class DevvitFormSelectionList extends InputElement {
    constructor() {
        super(...arguments);
        _DevvitFormSelectionList_config.set(this, FieldConfig_Selection.fromPartial({}));
        _DevvitFormSelectionList_selection.set(this, FormFieldValue_SelectionValue.fromPartial({}));
        _DevvitFormSelectionList_updateSelection.set(this, (choice, selected = true) => {
            if (__classPrivateFieldGet(this, _DevvitFormSelectionList_config, "f").multiSelect) {
                const index = __classPrivateFieldGet(this, _DevvitFormSelectionList_selection, "f").values.indexOf(choice.value);
                if (selected && index < 0) {
                    __classPrivateFieldGet(this, _DevvitFormSelectionList_selection, "f").values.push(choice.value);
                }
                else if (index >= 0) {
                    __classPrivateFieldGet(this, _DevvitFormSelectionList_selection, "f").values.splice(index, 1);
                }
            }
            else {
                __classPrivateFieldGet(this, _DevvitFormSelectionList_selection, "f").values = [choice.value];
            }
        });
    }
    static get styles() {
        return [super.styles, styles];
    }
    get value() {
        return __classPrivateFieldGet(this, _DevvitFormSelectionList_selection, "f").values.join(',');
    }
    willUpdate(changedProperties) {
        if (changedProperties.has('field')) {
            __classPrivateFieldSet(this, _DevvitFormSelectionList_config, this.field?.fieldConfig?.selectionConfig ?? FieldConfig_Selection.fromPartial({}), "f");
            __classPrivateFieldSet(this, _DevvitFormSelectionList_selection, this.field?.defaultValue?.selectionValue ?? FormFieldValue_SelectionValue.fromPartial({}), "f");
        }
    }
    render() {
        let formField;
        if (this.field) {
            const renderRadio = (choice, index) => {
                const id = `${this.field?.fieldId}_${index}`;
                return html `
          <faceplate-radio-input
            id="${id}"
            name="${this.field?.fieldId}"
            data-value="${choice.value}"
            ?disabled="${this.field?.disabled}"
            ?required="${this.field?.required}"
            @input="${() => {
                    __classPrivateFieldGet(this, _DevvitFormSelectionList_updateSelection, "f").call(this, choice);
                }}"
          >
            ${choice.label}
          </faceplate-radio-input>
        `;
            };
            const renderCheckbox = (choice, index) => {
                const id = `${this.field?.fieldId}_${index}`;
                return html `
          <faceplate-checkbox-input
            id="${id}"
            name="${this.field?.fieldId}"
            class="m-sm"
            data-value="${choice.value}"
            @input="${(ev) => {
                    __classPrivateFieldGet(this, _DevvitFormSelectionList_updateSelection, "f").call(this, choice, ev.currentTarget.checked);
                }}"
          >
            ${choice.label}
          </faceplate-checkbox-input>
        `;
            };
            formField = html `${renderFieldLabel(this.field)}${repeat(__classPrivateFieldGet(this, _DevvitFormSelectionList_config, "f").choices ?? [], __classPrivateFieldGet(this, _DevvitFormSelectionList_config, "f").multiSelect === true ? renderCheckbox : renderRadio)}`;
        }
        return html `${formField}${super.render()}`;
    }
}
_DevvitFormSelectionList_config = new WeakMap(), _DevvitFormSelectionList_selection = new WeakMap(), _DevvitFormSelectionList_updateSelection = new WeakMap();
__decorate([
    property({ attribute: false }),
    __metadata("design:type", Object)
], DevvitFormSelectionList.prototype, "field", void 0);
// Faceplate's base classes and mixins aren't playing nice with type checking for some reason
// eslint-disable-next-line @typescript-eslint/no-explicit-any
customElements.define('devvit-form-selection-list', DevvitFormSelectionList);
//# sourceMappingURL=devvit-form-selection-list.js.map