import React, { FC, useContext } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import axios from 'axios';
import { NonAuthRoutes } from 'api/routes';
import { useHistory } from 'react-router-dom';
import { AuthContext } from 'components/Auth/AuthContext';
import {
  CssBaseline,
  Grid,
  Typography,
  Hidden,
  createMuiTheme,
  responsiveFontSizes,
  MuiThemeProvider,
  TextField,
  Button,
  Select,
  MenuItem,
} from '@material-ui/core';
import { NavBar } from 'components/Dashboard/HomePage/NavBar';

let themeResp = createMuiTheme();
themeResp = responsiveFontSizes(themeResp);

const useStyles = makeStyles(() => ({
  root: {
    minHeight: '36vh',
    backgroundImage: `url(${'/assets/bg7.png'})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
  },
  rightAlign: {
    marginLeft: 'auto',
  },
  whiteText: {
    color: 'white',
  },
  imageIcon: {
    maxHeight: '50%',
  },
  paddingBottom: {
    paddingBottom: '65px',
  },
  paddingTop: {
    paddingTop: '2em',
  },
  marginTop: {
    marginTop: '5em',
  },
  marginTopLittle: {
    marginTop: '1em',
  },

  buttonUpdate: {
    marginTop: '2em',
    marginLeft: 'auto',
  },
  paddingTopLittle: {
    paddingTop: '1em',
  },
  bodyIcon: {
    fontSize: '90px',
    paddingBottom: '10px',
    paddingTop: '10px',
  },
  contIcon: {
    width: '100%',
    left: '0',
    right: '0',
  },
  noShadow: {
    border: 'none',
    boxShadow: 'none',
    backgroundColor: 'transparent',
  },
  extendedIcon: {
    fontSize: '50px',
  },
  fab: {
    margin: '10px 90px 80px 10px',
    bottom: '0',
    right: '0',
    position: 'fixed',
    padding: '45px',
  },
  fabSmall: {
    margin: '10px 45px 70px 10px',
    bottom: '0',
    right: '0',
    position: 'fixed',
    padding: '35px',
  },
}));

export const ProfilePage: FC = () => {
  const history = useHistory();
  const { setIsAuth } = useContext(AuthContext);
  const logout = (): void => {
    axios.get('/api/web/login/logout').then(() => {
      setIsAuth(false);
      history.replace(NonAuthRoutes.home);
    });
  };

  const classes = useStyles();

  const [lang, setLang] = React.useState<string | number>('');
  const [open, setOpen] = React.useState(false);

  const handleChange = (event: React.ChangeEvent<{ value: unknown }>): void => {
    setLang(event.target.value as number);
  };

  const handleClose = (): void => {
    setOpen(false);
  };

  const handleOpen = (): void => {
    setOpen(true);
  };

  return (
    <Grid container direction="column" className={classes.paddingBottom}>
      <div className={classes.root}>
        <CssBaseline />

        <Grid item>
          <NavBar />
        </Grid>

        <MuiThemeProvider theme={themeResp}>
          <Grid item container className={classes.paddingBottom}>
            <Grid item xs={1} md={2} lg={2} />

            <Grid item xs={10} md={6} lg={4}>
              <Typography variant="h2" className={classes.whiteText}>
                Set Here Your
              </Typography>
              <Typography variant="h1" className={classes.whiteText}>
                PROFILE
              </Typography>
            </Grid>

            <Grid item xs={1} />
          </Grid>
        </MuiThemeProvider>
      </div>

      <MuiThemeProvider theme={themeResp}>
        <Grid item container className={classes.paddingTop}>
          <Grid item xs={2} />
          <Grid item container xs={8}>
            <Grid item xs={12}>
              <Typography variant="h2">Your Profile Settings</Typography>
            </Grid>

            <Grid item xs={5} className={classes.paddingTopLittle}>
              <TextField
                autoFocus
                margin="dense"
                id="name"
                label="First Name"
                type="text"
                fullWidth
              />
            </Grid>
            <Grid item xs={2} className={classes.paddingTopLittle} />
            <Grid item xs={5} className={classes.paddingTopLittle}>
              <TextField
                autoFocus
                margin="dense"
                id="name"
                label="Last Name"
                type="text"
                fullWidth
              />
            </Grid>

            <Grid item xs={5} className={classes.paddingTopLittle}>
              <TextField
                autoFocus
                margin="dense"
                id="name"
                label="Address"
                type="text"
                fullWidth
              />
            </Grid>

            <Grid item xs={2} className={classes.paddingTopLittle} />

            <Grid item xs={2} className={classes.paddingTopLittle}>
              <TextField
                autoFocus
                margin="dense"
                id="name"
                label="CAP"
                type="text"
                fullWidth
              />
            </Grid>

            <Grid item xs={1} className={classes.paddingTopLittle} />

            <Grid item xs={2} className={classes.paddingTopLittle}>
              <TextField
                autoFocus
                margin="dense"
                id="name"
                label="Prov"
                type="text"
                fullWidth
              />
            </Grid>

            <Grid item xs={12} className={classes.paddingTopLittle}>
              <TextField
                autoFocus
                margin="dense"
                id="name"
                label="Email"
                type="text"
                fullWidth
              />
            </Grid>

            <Grid item xs={12} className={classes.paddingTopLittle}>
              <TextField
                autoFocus
                margin="dense"
                id="name"
                label="Card No"
                type="text"
                fullWidth
              />
            </Grid>

            <Grid item xs={12} className={classes.paddingTop}>
              <Select
                labelId="Language"
                id="Language"
                label="Language"
                open={open}
                onClose={handleClose}
                onOpen={handleOpen}
                value={lang}
                onChange={handleChange}
                fullWidth
              >
                <MenuItem value={20}>Italiano</MenuItem>
                <MenuItem value={10}>English</MenuItem>
                <MenuItem value={30}>Deutsch</MenuItem>
                <MenuItem value={40}>Ladinisch</MenuItem>
              </Select>
            </Grid>

            <Button
              color="primary"
              variant="contained"
              className={classes.buttonUpdate}
            >
              Update
            </Button>

            <Button
              fullWidth
              variant="outlined"
              color="default"
              onClick={logout}
              className={classes.marginTop}
            >
              Logout
            </Button>
          </Grid>

          <Grid item xs={2} />
        </Grid>
      </MuiThemeProvider>
    </Grid>
  );
};