import React, { useState } from "react";
import { withStyles } from "@material-ui/core/styles";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";

const OrangeSwitch = withStyles({
  root: {
    width: "60px",
    height: "40px",
  },
  switchBase: {
    color: "#F54404",
    "&$checked": {
      color: "#F54404",
    },
    "&$checked + $track": {
      backgroundColor: "#F54404",
    },

    "&$focusVisible $thumb": {
      border: "6px solid #F54404",
    },
  },
  track: {
    border: `1px solid black`,
    backgroundColor: "white",
  },
  checked: {},
})(Switch);

export default function CustomizedSwitches() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div>
      <FormControlLabel
        control={
          <OrangeSwitch
            checked={isChecked}
            onChange={handleChange}
            name="checkedA"
          />
        }
        label="change the color!"
      />
    </div>
  );
}