import React from "react";
import { useApplicationTheme } from "hooks";
import { Grid, Paper, FormControlLabel, Switch, Box } from "@mui/material";
import LanguageContainer from "./language/LanguageContainer";
import { PaperTitle } from "components/common";
import { useTranslation } from "react-i18next";

const styles = {
  language: {
    paddingLeft: 1
  }
};

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

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

  return (
    <Paper variant="outlined">
      <PaperTitle text={t("Settings.Appearance.Title")} />
      <Grid container spacing={0}>
        <Grid size={{ 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 size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
          <FormControlLabel
            value="start"
            control={
              <Box sx={styles.language}>
                <LanguageContainer />
              </Box>
            }
            label="Language:"
            labelPlacement="start"
          />
        </Grid>
      </Grid>
    </Paper>
  );
};

export default AppearanceComponent;
