import React from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import PageTitle from "../../../../components/PageTitle";
import LanguageContainer from "./LanguageContainer";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import {
  Save as SaveIcon,
  Vibration as VibrationIcon
} from "@material-ui/icons";
import { Card } from "../../../../components/Card";

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    width: 300
  }
}));

const AppearancePage = () => {
  const [state, setState] = React.useState({ theme: "default" });

  const { t } = useTranslation();
  const classes = useStyles();

  const handleThemeChange = (event, newValue) => {
    setState((prev) => ({ ...prev, theme: newValue }));
  };

  const themes = ["default", "black", "blue"];
  return (
    <>
      <PageTitle title={t("Menu.Appearance")} />

      <Card
        Icon={<VibrationIcon />}
        title={t("Forward.Options.KeyOverwrite.Label")}
        subtitle={t("Forward.Options.KeyOverwrite.Tooltip")}
        Content={
          <>
            <LanguageContainer />
            <br />
            <Autocomplete
              id="settings.appearance.theme.autocomplete"
              size="small"
              options={themes}
              value={state.theme}
              onChange={handleThemeChange}
              getOptionLabel={(option) => option}
              className={classes.formControl}
              renderInput={(params) => (
                <TextField {...params} label="Theme" variant="outlined" />
              )}
            />
          </>
        }
        Actions={
          <Button
            variant="contained"
            color="primary"
            size="small"
            startIcon={<SaveIcon />}
          >
            Save
          </Button>
        }
      />
    </>
  );
};

export default AppearancePage;
