menui_web/src/components/Input/Checkboxes.js

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import FormLabel from "@material-ui/core/FormLabel";
import FormControl from "@material-ui/core/FormControl";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import FormHelperText from "@material-ui/core/FormHelperText";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiFormLabel-root": {
      color: "#d68000",
      marginBottom: theme.spacing(2),
      marginLeft: "auto",
      marginRight: "auto",
      fontWeight: "500"
    },
    "& .MuiFormHelperText-root": {
      color: "#7e7e7e",
    },
    "& .MuiFormGroup-root": {
      display: "inline",
    },
    border: "1px solid #1c1c1c",
    borderRadius: "6px",
    marginBottom: theme.spacing(2),
  },
  formControl: {
    margin: theme.spacing(2),
    alignItems: "center",
  },
}));

export default function Checkboxes(props) {
  const classes = useStyles();
  const initialState = {
    gluten: props.allergens.gluten,
    lactose: props.allergens.lactose,
    soy: props.allergens.soy,
    eggs: props.allergens.eggs,
    seaFood: props.allergens.seaFood,
    peanuts: props.allergens.peanuts,
    sesame: props.allergens.sesame,
  };
  const [state, setState] = useState(initialState);

  return (
    <div className={classes.root}>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormLabel component="legend">Alergeny</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={
              <Checkbox
                checked={state.gluten}
                onChange={() => {
                  props.onUpdate({ ...state, gluten: !state.gluten });
                  setState({ ...state, gluten: !state.gluten });
                }}
                name="gluten"
              />
            }
            label="Gluten"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={state.lactose}
                onChange={() => {
                  props.onUpdate({ ...state, lactose: !state.lactose });
                  setState({ ...state, lactose: !state.lactose });
                }}
                name="lactose"
              />
            }
            label="Laktoza"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={state.soy}
                onChange={() => {
                  props.onUpdate({ ...state, soy: !state.soy });
                  setState({ ...state, soy: !state.soy });
                }}
                name="soy"
              />
            }
            label="Soja"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={state.eggs}
                onChange={() => {
                  props.onUpdate({ ...state, eggs: !state.eggs });
                  setState({ ...state, eggs: !state.eggs });
                }}
                name="eggs"
              />
            }
            label="Jaja"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={state.seaFood}
                onChange={() => {
                  props.onUpdate({ ...state, seaFood: !state.seaFood });
                  setState({ ...state, seaFood: !state.seaFood });
                }}
                name="seaFood"
              />
            }
            label="Owoce morza"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={state.peanuts}
                onChange={() => {
                  props.onUpdate({ ...state, peanuts: !state.peanuts });
                  setState({ ...state, peanuts: !state.peanuts });
                }}
                name="peanuts"
              />
            }
            label="Orzechy"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={state.sesame}
                onChange={() => {
                  props.onUpdate({ ...state, sesame: !state.sesame });
                  setState({ ...state, sesame: !state.sesame });
                }}
                name="sesame"
              />
            }
            label="Sezam"
          />
        </FormGroup>
      </FormControl>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormLabel component="legend">Inne</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={
              <Checkbox
                checked={props.vegan}
                onChange={() => props.onVegan()}
                name="vegan"
              />
            }
            label="Danie wegańskie"
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={props.vegetarian}
                onChange={() => props.onVegetarian()}
                name="vegetarian"
              />
            }
            label="Danie wegetariańskie"
          />
        </FormGroup>
      </FormControl>
    </div>
  );
}