/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-nested-ternary */
import React, { useEffect, useState } from 'react';
import { Grid, Button } from '@mui/material';
import { makeStyles, withStyles } from '@mui/styles';

import Typography from '@mui/material/Typography';

import { green, red, blue } from '@mui/material/colors';

import Radio, { RadioProps } from '@mui/material/Radio';
import { observer } from 'mobx-react';
import { useNavigate } from 'react-router-dom';
import { clone } from 'mobx-keystone';
import { useTranslation } from 'react-i18next';
import { getRootStore } from '../../models/root-store';

const GreenRadio = withStyles({
  root: {
    color: 'grey',
    '&$checked': {
      color: green[600],
      animation: `$bounce 0.5s infinite alternate`,
      animationTimingFunction: 'ease-in-out',
    },
  },

  '@keyframes bounce': {
    '0%': {
      transform: 'translateY(30%)',
    },
    '50%': {
      transform: 'translateY(-30%)',
      scale: '120%',
    },
    '100%': {
      transform: 'translateY(-30%)',
    },
  },
  checked: {},
})((props: RadioProps) => <Radio color="default" {...props} />);

const BlueRadio = withStyles({
  root: {
    color: 'grey',
    '&$checked': {
      color: blue[600],
    },
  },
  checked: {},
})((props: RadioProps) => <Radio color="default" {...props} />);

const RedRadio = withStyles({
  root: {
    color: 'grey',
    '&$checked': {
      color: red[600],
      animation: `$bounce 1s alternate`,
      animationTimingFunction: 'ease-in-out',
    },
  },

  '@keyframes bounce': {
    '0%': {
      transform: 'translateX(0%)',
    },
    '25%': {
      transform: 'translateX(40%)',
      scale: '120%',
    },
    '50%': {
      transform: 'translateX(-40%)',
      scale: '140%',
    },
    '75%': {
      scale: '120%',
    },
    '100%': {
      transform: 'translateX(0%)',
    },
  },
  checked: {},
})((props: RadioProps) => <Radio color="default" {...props} />);

const useStyles = makeStyles({
  content: {
    alignItems: 'center',
  },
  root: {
    flexGrow: 1,
  },
  paper: {
    backgroundColor: '#95A5A6',
    textAlign: 'center',
  },
  code: {
    margin: 0,
    padding: 0,
    textAlign: 'center',
  },
  gridItemButton: {
    margin: 0,
    padding: 0,
    textAlign: 'center',
  },
  button: {
    backgroundColor: '#3E3E3E',
    height: '80%',
    width: '90%',
    margin: 20,
    padding: 20,
    textAlign: 'center',
  },
  typo: {
    fontSize: 'auto',
  },
  btn: {
    height: 60,
    fontSize: 18,
  },
  buttonRipplePulsate: {
    animationDuration: `5000ms`,
  },
  check: {
    color: 'grey',
    '&$checked': {
      color: green[600],
    },
  },
  checkAnim: {
    color: 'grey',
    '&$checked': {
      color: green[600],
    },
  },
});

function Settings() {
  const [rootStore] = useState(() => getRootStore());
  const classes = useStyles();
  const [code, setCode] = useState([]);
  const [animation, setAnimation] = useState(false);
  const [error, setError] = useState(false);
  const history = useNavigate();

  const handleButtonClick = (e: {
    preventDefault: () => void;
    currentTarget: { value: string };
  }) => {
    e.preventDefault();

    if (e.currentTarget.value === '*') {
      setCode([]);
      return;
    }
    const value = [e.currentTarget.value];
    const combinedArray: any = [...code, ...value];

    if (combinedArray.length === 4) {
      if (rootStore.userList.checkCodeForLogin(combinedArray.join(''))) {
        setAnimation(true);
        setTimeout(() => {
          setAnimation(false);
          rootStore.userList.setLoggedIn(true);
          setCode([]);
          history('/');
        }, 1200);
        rootStore.userList.setLoggedInUser(
          clone(rootStore.userList.checkCodeReturnUser(combinedArray.join('')))
        );
      } else {
        setError(true);
        setTimeout(() => {
          setError(false);
          setCode([]);
        }, 1000);
      }
    }

    if (code.length <= 3) {
      setCode(combinedArray);
    }
  };

  const { t } = useTranslation();

  return (
    <div className={classes.content} data-tid="container">
      <br />
      {rootStore.userList.loggedInStatus ? (
        <Grid
          container
          spacing={0}
          style={{ alignItems: 'stretch' }}
          direction="row"
        >
          <Grid item xs={12}>
            <Grid item xs={12}>
              <Typography
                style={{
                  color: rootStore.settings.darkMode ? 'white' : 'black',
                  textAlign: 'center',
                }}
                variant="h4"
              >
                {t('login.Welcom')}, {rootStore.userList.loggedInUser?.name} ({' '}
                {t('common.level')}:{' '}
                {rootStore.userList.loggedInUser?.userlevel} )
              </Typography>
            </Grid>
          </Grid>
          <Grid item xs={3} />
          <Grid item className={classes.code} xs={6}>
            <Button
              size="large"
              sx={{ margin: 3 }}
              className={classes.button}
              onClick={() => {
                rootStore.userList.setLoggedIn(false);
                rootStore.userList.setLoggedInUser(0);
                setTimeout(() => {
                  history('/');
                }, 500);
              }}
              variant="outlined"
              color="primary"
            >
              {t('login.login-button')}
            </Button>
          </Grid>
          <Grid item xs={3} />
        </Grid>
      ) : (
        <Grid container spacing={0}>
          <Grid item xs={3} />
          <Grid item className={classes.code} xs={6}>
            {animation ? (
              <GreenRadio
                checked={code[0] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            ) : error ? (
              <RedRadio
                checked={code[0] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            ) : (
              <BlueRadio
                checked={code[0] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            )}
            {animation ? (
              <GreenRadio
                checked={code[1] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            ) : error ? (
              <RedRadio
                checked={code[1] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            ) : (
              <BlueRadio
                checked={code[1] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            )}
            {animation ? (
              <GreenRadio
                checked={code[2] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            ) : error ? (
              <RedRadio
                checked={code[2] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            ) : (
              <BlueRadio
                checked={code[2] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            )}
            {animation ? (
              <GreenRadio
                checked={code[3] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            ) : error ? (
              <RedRadio
                checked={code[3] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            ) : (
              <BlueRadio
                checked={code[3] != null}
                value={code}
                name="radio-button-demo"
                size="medium"
              />
            )}
          </Grid>
          <Grid item xs={3} />
          <Grid item md={1} lg={3} />
          <Grid item xs={12} md={10} lg={6}>
            <Grid container spacing={0}>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  size="large"
                  className={classes.button}
                  TouchRippleProps={{
                    classes: {
                      ripplePulsate: classes.buttonRipplePulsate,
                    },
                  }}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value={1}
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    1
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value={2}
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    2
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value={3}
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    3
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value={4}
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    4
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value={5}
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    5
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value={6}
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    6
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value={7}
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    7
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value={8}
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    8
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value={9}
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    9
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value="*"
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    *
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value={0}
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    0
                  </Typography>
                </Button>
              </Grid>
              <Grid item xs={4} className={classes.gridItemButton}>
                <Button
                  sx={{ margin: 3 }}
                  className={classes.button}
                  onMouseUp={handleButtonClick}
                  onTouchEnd={handleButtonClick}
                  value="#"
                  variant="outlined"
                  color="primary"
                >
                  <Typography className={classes.typo} variant="h5">
                    #
                  </Typography>
                </Button>
              </Grid>
            </Grid>
          </Grid>
          <Grid item md={1} lg={3} />
        </Grid>
      )}
    </div>
  );
}
export default observer(Settings);
