Source: pages-sections/Routeplanner-Sections/ToggleMap.js

import { useState, useRef, useEffect } from "react";

import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";

import styles from "/styles/jss/nextjs-material-kit/pages/componentsSections/basicsStyle.js";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(styles);

/**
 * The ToggleMap function is a React component that renders a switch toggle with customizable styling
 * and label.
 * @param props - The `ToggleMap` function takes in a `props` object as its parameter. The `props`
 * object contains the following properties:
 * @returns The `ToggleMap` function is being returned. It is a functional component that renders a
 * `FormControlLabel` component containing a `Switch` component. The `ToggleMap` component takes in
 * props such as `state`, `setState`, `toggleName`, and other props, spreads the rest of the props, and
 * uses Material-UI's styling classes to customize the appearance of the `Switch` component
 */
export function ToggleMap(props) {
  const { state, setState, toggleName = null, ...rest } = props;
  const classes = useStyles();
  return (
    <FormControlLabel
      control={
        <Switch
          checked={state}
          onChange={(event) => setState(event.target.checked)}
          value="checkedA"
          classes={{
            switchBase: classes.switchBase,
            checked: classes.switchChecked,
            thumb: classes.switchIcon,
            track: classes.switchBar,
          }}
        />
      }
      classes={{
        label: classes.label,
      }}
      label={toggleName}
    />
  );
}