import React from "react";
import { useApplicationTheme } from "../../../providers/ThemeProvider";
import { Grid, Paper, FormControlLabel, Switch } from "@material-ui/core";
import LanguageContainer from "./language/LanguageContainer";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  paper: {
    paddingTop: theme.spacing(1)
  },
  language: {
    paddingLeft: theme.spacing(1)
  }
}));

const AppearanceComponent = () => {
  const { isDark, onDarkModeChanged } = useApplicationTheme();

  const classes = useStyles();

  const handleChange = event => {
    const { checked } = event.target;
    onDarkModeChanged(checked);
  };

  return (
    <Paper variant="outlined" className={classes.paper}>
      <Grid container spacing={0}>
        <Grid item xs={12} sm={6} md={4} lg={3}>
          <FormControlLabel
            value="start"
            control={
              <Switch
                checked={isDark}
                onChange={handleChange}
                color="secondary"
                name="dark-mode-switch"
              />
            }
            label="Dark mode:"
            labelPlacement="start"
          />
        </Grid>
        <Grid item xs={12} sm={6} md={4} lg={3}>
          <FormControlLabel
            value="start"
            control={
              <div className={classes.language}>
                <LanguageContainer />
              </div>
            }
            label="Language:"
            labelPlacement="start"
          />
        </Grid>
      </Grid>
    </Paper>
  );
};

export default AppearanceComponent;