mapcomplete/UI/Input/RadioButton.ts

import { InputElement } from "./InputElement";
import { UIEventSource } from "../../Logic/UIEventSource";
import { Utils } from "../../Utils";

export class RadioButton<T> extends InputElement<T> {
  private static _nextId = 0;
  IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
  private readonly value: UIEventSource<T>;
  private _elements: InputElement<T>[];
  private _selectFirstAsDefault: boolean;
  private styleFormOverride = "";
  private styleBlockOverride = "";
  private styleInputOverride = "";
  private styleLabelOverride = "";

  constructor(
    elements: InputElement<T>[],
    selectFirstAsDefault = true,
    styleFormOverride = "",
    styleBlockOverride = "",
    styleInputOverride = "",
    styleLabelOverride = ""
  ) {
    super();
    this._selectFirstAsDefault = selectFirstAsDefault;
    this._elements = Utils.NoNull(elements);
    this.value = new UIEventSource<T>(undefined);
    this.styleFormOverride = styleFormOverride;
    this.styleBlockOverride = styleBlockOverride;
    this.styleInputOverride = styleInputOverride;
    this.styleLabelOverride = styleLabelOverride;
  }
  protected InnerConstructElement(): HTMLElement {
    const elements = this._elements;
    const selectFirstAsDefault = this._selectFirstAsDefault;

    const selectedElementIndex: UIEventSource<number> =
      new UIEventSource<number>(null);

    const value = UIEventSource.flatten(
      selectedElementIndex.map((selectedIndex) => {
        if (selectedIndex !== undefined && selectedIndex !== null) {
          return elements[selectedIndex].GetValue();
        }
      }),
      elements.map((e) => e?.GetValue())
    );
    value.syncWith(this.value);

    if (selectFirstAsDefault) {
      value.addCallbackAndRun((selected) => {
        if (selected === undefined) {
          for (const element of elements) {
            const v = element.GetValue().data;
            if (v !== undefined) {
              value.setData(v);
              break;
            }
          }
        }
      });
    }

    for (let i = 0; i < elements.length; i++) {
      // If an element is clicked, the radio button corresponding with it should be selected as well
      elements[i]?.onClick(() => {
        selectedElementIndex.setData(i);
      });
      elements[i].IsSelected.addCallback((isSelected) => {
        if (isSelected) {
          selectedElementIndex.setData(i);
        }
      });
      elements[i].GetValue().addCallback(() => {
        selectedElementIndex.setData(i);
      });
    }

    const groupId = "radiogroup" + RadioButton._nextId;
    RadioButton._nextId++;

    const form = document.createElement("form");
    form.style.cssText = this.styleFormOverride;

    const inputs = [];
    const wrappers: HTMLElement[] = [];

    for (let i1 = 0; i1 < elements.length; i1++) {
      let element = elements[i1];
      const labelHtml = element.ConstructElement();
      if (labelHtml === undefined) {
        continue;
      }

      const input = document.createElement("input");
      input.id = "radio" + groupId + "-" + i1;
      input.name = groupId;
      input.type = "radio";
      input.classList.add(
        "p-1",
        "cursor-pointer",
        "ml-2",
        "pl-2",
        "pr-0",
        "m-3",
        "mr-0"
      );
      input.style.cssText = this.styleInputOverride;

      input.onchange = () => {
        if (input.checked) {
          selectedElementIndex.setData(i1);
        }
      };

      inputs.push(input);

      const label = document.createElement("label");
      label.appendChild(labelHtml);
      label.htmlFor = input.id;
      label.classList.add("block", "w-full", "p-2", "cursor-pointer", "bg-red");
      label.style.cssText = this.styleLabelOverride;

      const block = document.createElement("div");
      block.appendChild(input);
      block.appendChild(label);
      block.classList.add(
        "flex",
        "w-full",
        "border",
        "rounded-3xl",
        "border-gray-400",
        "m-1"
      );
      block.style.cssText = this.styleBlockOverride;
      wrappers.push(block);

      form.appendChild(block);
    }

    value.addCallbackAndRun((selected) => {
      let somethingChecked = false;
      for (let i = 0; i < inputs.length; i++) {
        let input = inputs[i];
        input.checked = !somethingChecked && elements[i].IsValid(selected);
        somethingChecked = somethingChecked || input.checked;

        if (input.checked) {
          wrappers[i].classList.remove("border-gray-400");
          wrappers[i].classList.add("border-black");
        } else {
          wrappers[i].classList.add("border-gray-400");
          wrappers[i].classList.remove("border-black");
        }
      }
    });

    this.SetClass("flex flex-col");

    return form;
  }

  IsValid(t: T): boolean {
    for (const inputElement of this._elements) {
      if (inputElement.IsValid(t)) {
        return true;
      }
    }
    return false;
  }

  GetValue(): UIEventSource<T> {
    return this.value;
  }

  /*
    public ShowValue(t: T): boolean {
        if (t === undefined) {
            return false;
        }
        if (!this.IsValid(t)) {
            return false;
        }
        // We check that what is selected matches the previous rendering
        for (let i = 0; i < this._elements.length; i++) {
            const e = this._elements[i];
            if (e.IsValid(t)) {
                this._selectedElementIndex.setData(i);
                e.GetValue().setData(t);
                const radio = document.getElementById(this.IdFor(i));
                // @ts-ignore
                radio?.checked = true;
                return;
            }

        }
    }*/
}