{"size": 1023, "ext": "js", "max_stars_repo_path": "demo/Controls/Controls.js", "max_stars_repo_name": "gleb-lobastov/flocking-boids", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "demo/Controls/Controls.js", "max_issues_repo_name": "gleb-lobastov/flocking-boids", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "demo/Controls/Controls.js", "max_forks_repo_name": "gleb-lobastov/flocking-boids", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.4166666667, "max_line_length": 73, "alphanum_fraction": 0.6471163245}
import React, { useState } from "react";
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import { SettingsContextProvider } from "./context/SettingsContext";
import { FpsContextProvider } from "./context/FpsContext";
import ControlsPanel from "./blocks/ControlsPanel";
import ControlsToggle from "./blocks/ControlsToggle";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#658fb2"
    },
    secondary: {
      main: "#ffc032"
    }
  }
});

export default function Controls({ settings }) {
  const [isPanelVisible, setIsPanelVisible] = useState(false);

  return (
    <ThemeProvider theme={theme}>
      <SettingsContextProvider settings={settings}>
        <FpsContextProvider>
          {isPanelVisible ? (
            <ControlsPanel onClose={() => setIsPanelVisible(false)} />
          ) : (
            <ControlsToggle onClick={() => setIsPanelVisible(true)} />
          )}
        </FpsContextProvider>
      </SettingsContextProvider>
    </ThemeProvider>
  );
}
