food-site/src/foodTypeToggles.tsx

import { Component, createRef, JSX, RefObject } from "preact";
import { ToggleableBox } from "./toggleableBox";
import { FoodExcludeTypes } from "./types";

let defaultBroadExclusions = {
  isVegan: false,
  isVegetarian: false,
}

let defaultFoodToggles: FoodExcludeTypes = {
  containsMeat: true,
  containsFish: true,
  containsEggs: true,
  containsMilk: true,
  containsAlcohol: true,
}

export class FoodTypeToggles extends Component<{
  onChange?: (toggles: FoodExcludeTypes) => void;
}, {
  toggles: FoodExcludeTypes;
  broadExclusions: {
    isVegan: boolean;
    isVegetarian: boolean;
  }
}> {
  refs = {
    "isVegan": createRef<ToggleableBox>(),
    "isVegetarian": createRef<ToggleableBox>(),
    "containsMeat": createRef<ToggleableBox>(),
    "containsFish": createRef<ToggleableBox>(),
    "containsEggs": createRef<ToggleableBox>(),
    "containsMilk": createRef<ToggleableBox>(),
    "containsAlcohol": createRef<ToggleableBox>(),
  }

  constructor() {
    super()
    this.state = {
      toggles: { ...defaultFoodToggles },
      broadExclusions: defaultBroadExclusions,
    }
  }

  componentDidMount(): void {
    this.setToDefaults();
    this.sendChangedEvent();
  }

  setCheckedStateOfInputBoxes(names: string[], value: boolean) {
    for (let name of names) {
      if (Object.keys(this.refs).includes(name)) {
        let ref: RefObject<ToggleableBox> = this.refs[name];
        if (ref.current) {
          if (Object.keys(this.state.toggles).includes(name)) {
            this.state.toggles[name] = value;
          }
          ref.current.forceChange(value)
        } else {
          console.debug(`Can't get current ref for: ${name}`)
        }
      } else {
        console.debug(`Can't find ref for ${name}`)
      }
    }
  }

  veganModeEnable() {
    this.vegetarianModeEnable()
    this.setCheckedStateOfInputBoxes(["containsMilk", "containsEggs"], false);
  }

  vegetarianModeEnable() {
    this.setCheckedStateOfInputBoxes(["containsMeat", "containsFish"], false);
  }

  veganModeDisable() {
    this.setCheckedStateOfInputBoxes(["isVegan"], false);
  }

  vegetarianModeDisable() {
    this.setCheckedStateOfInputBoxes(["isVegetarian"], false);
  }

  setToDefaults() {
    for (let toggle of Object.keys(defaultBroadExclusions)) {
      console.debug(`Setting broad exclusion ${toggle} to ${defaultBroadExclusions[toggle]}`)
      this.setCheckedStateOfInputBoxes([toggle], defaultBroadExclusions[toggle])
    }
    for (let toggle of Object.keys(defaultFoodToggles)) {
      console.debug(`Setting food default of ${toggle} to ${defaultFoodToggles[toggle]}`)
      console.debug(defaultFoodToggles)
      this.setCheckedStateOfInputBoxes([toggle], defaultFoodToggles[toggle])
    }
  }

  sendChangedEvent() {
    console.debug(`Changed state of food type toggles`, this.state.toggles)
    if(this.props.onChange) this.props.onChange(this.state.toggles);
  }

  render(): JSX.Element {
    return (
      <div>
        <h3 class="mt-5">Toggles</h3>
        <div>
          <p>Broad Toggles</p>
          <ToggleableBox
            title="Vegan" id="isVegan"
            checked={defaultBroadExclusions.isVegan}
            ref={this.refs.isVegan} onChange={(isVegan: boolean) => {
              if (isVegan) this.veganModeEnable();
              this.sendChangedEvent();
            }} />
          <ToggleableBox
            title="Vegetarian (ovo-lacto vegetarian)" id="isVegetarian"
            checked={defaultBroadExclusions.isVegetarian}
            ref={this.refs.isVegetarian} onChange={(isVegetarian: boolean) => {
              if (isVegetarian) this.vegetarianModeEnable();
              this.sendChangedEvent();
            }} />

          <p>Specific Toggles</p>
          <ToggleableBox
            title="Meat" id="containsMeat"
            checked={defaultFoodToggles.containsMeat}
            ref={this.refs.containsMeat} onChange={(containsMeat: boolean) => {
              this.state.toggles.containsMeat = containsMeat;
              if (containsMeat) {
                this.veganModeDisable();
                this.vegetarianModeDisable();
              }
              this.sendChangedEvent();
            }} />
          <ToggleableBox
            title="Fish" id="containsFish"
            checked={defaultFoodToggles.containsFish}
            ref={this.refs.containsFish} onChange={(containsFish: boolean) => {
              this.state.toggles.containsFish = containsFish;
              if (containsFish) {
                this.veganModeDisable();
                this.vegetarianModeDisable();
              }
              this.sendChangedEvent();
            }} />
          <ToggleableBox
            title="Eggs" id="containsEggs"
            checked={defaultFoodToggles.containsEggs}
            ref={this.refs.containsEggs} onChange={(containsEggs: boolean) => {
              this.state.toggles.containsEggs = containsEggs;
              if (containsEggs) this.veganModeDisable();
              this.sendChangedEvent();
            }} />
          <ToggleableBox
            title="Milk" id="containsMilk"
            checked={defaultFoodToggles.containsMilk}
            ref={this.refs.containsMilk} onChange={(containsMilk: boolean) => {
              this.state.toggles.containsMilk = containsMilk;
              if (containsMilk) this.veganModeDisable();
              this.sendChangedEvent();
            }} />
          <ToggleableBox
            title="Alcohol" id="containsAlcohol"
            checked={defaultFoodToggles.containsAlcohol}
            ref={this.refs.containsAlcohol} onChange={(containsAlcohol: boolean) => {
              this.state.toggles.containsAlcohol = containsAlcohol;
              this.sendChangedEvent();
            }} />

          <button type="button mt-5" class="btn btn-danger" onClick={() => {
            this.setToDefaults();
            this.sendChangedEvent();
          }}>Reset</button>
        </div>
      </div>
    );
  }
}