import { LightningElement, api } from "lwc";
import { toJson } from "dxUtils/normalizers";

type Option = {
    value: string;
    label: string;
    disabled: boolean;
};

export default class RadioGroup extends LightningElement {
    @api disabled: boolean = false;
    @api legend!: string;

    @api
    get options(): Option[] {
        const statefulOptions = this._options.map((option) => ({
            ...option,
            checked: option.value === this._value,
            disabled: this.disabled || option.disabled
        }));
        return statefulOptions;
    }
    set options(value) {
        this._options = toJson(value);
    }

    @api get defaultValue(): string | null {
        return this._defaultValue;
    }
    set defaultValue(value) {
        this._value = value || null;
    }

    @api get value(): string | null {
        return this._value;
    }
    set value(value) {
        if (this.defaultValue) {
            console.error(
                "Do not supply both value and default-value to form groups."
            );
        }

        this._value = value || null;
    }

    private _defaultValue: string | null = null;
    private _options: Option[] = [];
    private _value: string | null = null;

    private onChange(e: CustomEvent) {
        const { value: checkedValue, originalEvent } = e.detail;

        this._value = checkedValue;

        this.dispatchEvent(
            new CustomEvent("change", {
                detail: {
                    originalEvent,
                    value: this._value
                }
            })
        );
    }
}