/* eslint-disable react/jsx-key */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-console */
/* eslint-disable radix */
import { useState } from 'react';
import {
  Grid,
  Paper,
  FormControlLabel,
  Checkbox,
  Slider,
  Button,
} from '@mui/material';
import { makeStyles } from '@mui/styles';
import Typography from '@mui/material/Typography';

import { observer } from 'mobx-react';
import { ipcRenderer } from 'electron';
import { useTranslation } from 'react-i18next';
import { ColorPicker, ColorValue } from 'mui-color';
import { getRootStore } from '../../models/root-store';

const useStyles = makeStyles({
  content: {
    alignItems: 'center',
  },
  root: {
    flexGrow: 1,
  },
  paper: {
    textAlign: 'center',
  },
  paperInput: {
    alignItems: 'center',
    justifyContentItems: 'baseline',
    padding: 10,
    margin: 10,
    minHeight: 70,
  },
  paperInputNested: {
    alignItems: 'center',
    justifyContentItems: 'baseline',
    padding: 10,
    margin: 10,
    minHeight: 70,
  },
  paperUpdate: {
    alignItems: 'center',
    justifyContentItems: 'baseline',
    padding: 10,
    margin: 10,
    minHeight: 50,
  },
  buttons: {
    backgroundColor: '#666666',
    alignItems: 'center',
    alignSelf: 'center',
    padding: 10,
    margin: 10,
    minHeight: 70,
  },
  gridItemButton: {
    margin: 0,
    padding: 0,
    textAlign: 'center',
  },
  button: {
    backgroundColor: '#3E3E3E',
    height: '90%',
    width: '90%',
    margin: 25,
    padding: 25,
    textAlign: 'center',
  },
  typo: {
    fontSize: 'auto',
  },
  paperTop: {
    alignItems: 'center',
    padding: 10,
    marginTop: 15,
    margin: 15,
  },
  typoAddTicket: {
    marginLeft: 25,
    marginTop: 10,
    marginBottom: 10,
  },
  input: {
    color: 'white',
    fontSize: '1.1em',
    padding: '5px',
    width: 'auto',
  },
  inputLabel: {
    color: 'black',
    fontSize: '20px',
  },
  inputNumbers: {
    color: 'white',
    fontSize: '1.2em',
    padding: '5px',
    width: 'auto',
  },
  buttonInput: {
    backgroundColor: '#666666',
    alignItems: 'center',
    justifyContentContent: 'center',
    padding: 20,
    marginTop: 20,
    marginLeft: 10,
  },
});

function Layout() {
  const classes = useStyles();
  const [rootStore] = useState(() => getRootStore());
  const palette = {
    came_blue: '#009fe2',
    black: '#000000',
    secondary_green: '#4CAF50',
    lidl_blue: '#2250a9',
    dodgergrey: '#95a5a6',
    gray: '#808080',
    green: '#00ff00',
    yellow: '#FFFF00',
    orange: '#FFA500',
    purple: 'purple',
    white: 'white',
    blue: '#0000ff',
    dodgerblue: 'dodgerblue',
  };

  const handleChangeLogo = () => {
    ipcRenderer.send('handleChangeLogo', 'true');
  };

  const handleChangeColorHeader = (newValue: ColorValue) => {
    // Below is correct, it should contain .hex
    // @ts-ignore: Unreachable code error
    rootStore.layout.setHeaderColor(`#${newValue.hex}`);
  };
  const handleChangeColorFooter = (newValue: ColorValue) => {
    // @ts-ignore: Unreachable code error
    rootStore.layout.setFooterColor(`#${newValue.hex}`);
  };
  const handleChangeColorPrimary = (newValue: ColorValue) => {
    // @ts-ignore: Unreachable code error
    rootStore.layout.setPrimaryColor(`#${newValue.hex}`);
  };
  const handleChangeColorSecondary = (newValue: ColorValue) => {
    // @ts-ignore: Unreachable code error
    rootStore.layout.setSecondaryColor(`#${newValue.hex}`);
  };
  const handleChangeColorBackground = (newValue: ColorValue) => {
    // @ts-ignore: Unreachable code error
    rootStore.settings.setBackgroundColor(`#${newValue.hex}`);
  };
  const handleChangeColorBackgroundPaper = (newValue: ColorValue) => {
    // @ts-ignore: Unreachable code error
    rootStore.layout.setPaperBackgroundColor(`#${newValue.hex}`);
  };
  const handleChangeColorBackgroundComponent = (newValue: ColorValue) => {
    // @ts-ignore: Unreachable code error
    rootStore.layout.setComponentBackgroundColor(`#${newValue.hex}`);
  };
  const { t } = useTranslation();

  return (
    <Grid container justifyContent="center" spacing={0}>
      <Grid item xs={12} sm={12} md={12} lg={10} xl={8}>
        <Paper
          elevation={3}
          className={classes.paperTop}
          style={{ background: `${rootStore.settings.backgroundColor}` }}
        >
          <Grid item xs={12}>
            <Typography
              style={{
                color: rootStore.settings.darkMode ? 'white' : 'black',
              }}
              className={classes.content}
              variant="h4"
            >
              {t('settings.Interface')}
            </Typography>
          </Grid>
          <Grid container justifyContent="center" spacing={0}>
            <Grid item xs={12} sm={6} md={6} lg={6} xl={6}>
              <Paper className={classes.paperInput}>
                <Typography className={classes.content} variant="h6">
                  Custom logo
                </Typography>
                <br />
                <Button
                  variant="contained"
                  fullWidth
                  onClick={handleChangeLogo}
                >
                  Choose logo
                </Button>
                <br />
                <br />
                <Typography className={classes.content} variant="h6">
                  Logo maximum heigth
                </Typography>
                <Slider
                  value={rootStore.layout.maxHeightLogo}
                  onChange={(event, value) => {
                    if (typeof value === 'number') {
                      rootStore.layout.setMaxHeightLogo(value);
                    }
                  }}
                  step={10}
                  marks
                  min={20}
                  max={500}
                  valueLabelDisplay="auto"
                  aria-labelledby="discrete-slider-small-steps"
                />
                <br />
                <br />
                <Typography className={classes.content} variant="h6">
                  Margin
                </Typography>
                <Slider
                  value={rootStore.layout.marginLogo}
                  onChange={(event, value) => {
                    if (typeof value === 'number') {
                      rootStore.layout.setMarginLogo(value);
                    }
                  }}
                  step={1}
                  marks
                  min={0}
                  max={100}
                  valueLabelDisplay="auto"
                  aria-labelledby="discrete-slider-small-steps"
                />
              </Paper>
              <Paper className={classes.paperInput}>
                <Typography className={classes.content} variant="h6">
                  Colors
                </Typography>
                <br />
                <Grid container>
                  <Grid item xs={5}>
                    <Typography
                      className={classes.content}
                      component="span"
                      variant="body1"
                    >
                      Header
                    </Typography>
                  </Grid>
                  <Grid item xs={7}>
                    <ColorPicker
                      palette={palette}
                      value={rootStore.layout.headerColor}
                      onChange={handleChangeColorHeader}
                      hideTextfield
                    />
                  </Grid>
                </Grid>
                <Grid container>
                  <Grid item xs={5}>
                    <Typography
                      className={classes.content}
                      component="span"
                      variant="body1"
                    >
                      Footer
                    </Typography>
                  </Grid>
                  <Grid item xs={7}>
                    <ColorPicker
                      palette={palette}
                      value={rootStore.layout.footerColor}
                      onChange={handleChangeColorFooter}
                      hideTextfield
                    />
                  </Grid>
                </Grid>
                <Grid container>
                  <Grid item xs={5}>
                    <Typography
                      className={classes.content}
                      component="span"
                      variant="body1"
                    >
                      Primary
                    </Typography>
                  </Grid>
                  <Grid item xs={7}>
                    <ColorPicker
                      palette={palette}
                      value={rootStore.layout.primaryColor}
                      onChange={handleChangeColorPrimary}
                      hideTextfield
                    />
                  </Grid>
                </Grid>
                <Grid container>
                  <Grid item xs={5}>
                    <Typography
                      className={classes.content}
                      component="span"
                      variant="body1"
                    >
                      Secondary
                    </Typography>
                  </Grid>
                  <Grid item xs={7}>
                    <ColorPicker
                      palette={palette}
                      value={rootStore.layout.secondaryColor}
                      onChange={handleChangeColorSecondary}
                      hideTextfield
                    />
                  </Grid>
                </Grid>
                <Grid container>
                  <Grid item xs={5}>
                    <Typography
                      className={classes.content}
                      component="span"
                      variant="body1"
                    >
                      Background
                    </Typography>
                  </Grid>
                  <Grid item xs={7}>
                    <ColorPicker
                      palette={palette}
                      value={rootStore.settings.backgroundColor}
                      onChange={handleChangeColorBackground}
                      hideTextfield
                    />
                  </Grid>
                </Grid>
                <Grid container>
                  <Grid item xs={5}>
                    <Typography
                      className={classes.content}
                      component="span"
                      variant="body1"
                    >
                      Paper background
                    </Typography>
                  </Grid>
                  <Grid item xs={7}>
                    <ColorPicker
                      palette={palette}
                      value={rootStore.layout.paperBackgroundColor}
                      onChange={handleChangeColorBackgroundPaper}
                      hideTextfield
                    />
                  </Grid>
                </Grid>
                <Grid container>
                  <Grid item xs={5}>
                    <Typography
                      className={classes.content}
                      component="span"
                      variant="body1"
                    >
                      Component background
                    </Typography>
                  </Grid>
                  <Grid item xs={7}>
                    <ColorPicker
                      palette={palette}
                      value={rootStore.layout.componentBackgroundColor}
                      onChange={handleChangeColorBackgroundComponent}
                      hideTextfield
                    />
                  </Grid>
                </Grid>
              </Paper>
            </Grid>
            <Grid item xs={12} sm={6} md={6} lg={6} xl={6}>
              <Paper className={classes.paperInput}>
                <Typography className={classes.content} variant="h6">
                  App bars
                </Typography>
                <FormControlLabel
                  control={
                    <Checkbox
                      onClick={() => {
                        rootStore.layout.setShowHeader(
                          !rootStore.layout.showHeader
                        );
                      }}
                      color="primary"
                      checked={rootStore.layout.showHeader}
                    />
                  }
                  label="Show header"
                  labelPlacement="end"
                />
                <br />
                <FormControlLabel
                  control={
                    <Checkbox
                      onClick={() => {
                        rootStore.layout.setShowFooter(
                          !rootStore.layout.showFooter
                        );
                      }}
                      color="primary"
                      checked={rootStore.layout.showFooter}
                    />
                  }
                  label="Show footer"
                  labelPlacement="end"
                />
                <br />
                <Typography id="discrete-slider-small-steps" gutterBottom>
                  Minimum header size
                </Typography>
                <Slider
                  value={rootStore.layout.headerHeight}
                  aria-labelledby="discrete-slider-small-steps"
                  step={5}
                  marks
                  min={0}
                  max={400}
                  valueLabelDisplay="auto"
                  onChange={(event, value) => {
                    if (typeof value === 'number') {
                      rootStore.layout.setHeaderHeight(value);
                    }
                  }}
                />
                <br />
                <Typography id="discrete-slider-small-steps" gutterBottom>
                  Minimum footer size
                </Typography>
                <Slider
                  value={rootStore.layout.footerHeight}
                  aria-labelledby="discrete-slider-small-steps"
                  step={5}
                  marks
                  min={0}
                  max={250}
                  valueLabelDisplay="auto"
                  onChange={(event, value) => {
                    if (typeof value === 'number') {
                      rootStore.layout.setFooterHeight(value);
                    }
                  }}
                />
                <br />
              </Paper>
              <Paper className={classes.paperInput}>
                <Typography className={classes.content} variant="h6">
                  Icon size
                </Typography>
                <Slider
                  value={rootStore.layout.iconSizeValue}
                  aria-labelledby="discrete-slider-small-steps"
                  step={1}
                  marks
                  min={0}
                  max={2}
                  valueLabelDisplay="auto"
                  onChange={(event, value) => {
                    if (typeof value === 'number') {
                      rootStore.layout.setIconSizeValue(value);
                    }
                  }}
                />
                <br />
                <Typography className={classes.content} variant="h6">
                  Keypad size
                </Typography>
                <Slider
                  value={rootStore.layout.keypadSize}
                  aria-labelledby="discrete-slider-small-steps"
                  step={5}
                  marks
                  min={60}
                  max={100}
                  valueLabelDisplay="auto"
                  onChange={(event, value) => {
                    if (typeof value === 'number') {
                      rootStore.layout.setKeypadSize(value);
                    }
                  }}
                />
                <br />
                <Typography className={classes.content} variant="h6">
                  Screen type
                </Typography>
                <Slider
                  value={rootStore.layout.screenType}
                  aria-labelledby="discrete-slider-small-steps"
                  step={1}
                  marks
                  min={0}
                  max={1}
                  valueLabelDisplay="auto"
                  onChange={(event, value) => {
                    if (typeof value === 'number') {
                      rootStore.layout.setScreenType(value);
                    }
                  }}
                />
                <br />
              </Paper>
              <Paper className={classes.paperInput}>
                <Typography className={classes.content} variant="h6">
                  {t('settings.Interface')}
                </Typography>
                <FormControlLabel
                  control={
                    <Checkbox
                      onClick={() => {
                        if (rootStore.settings.darkMode) {
                          rootStore.layout.setPaperBackgroundColor('#e6e6e6');
                          rootStore.layout.setComponentBackgroundColor(
                            '#e6e6e6'
                          );
                        } else {
                          rootStore.layout.setPaperBackgroundColor('#1a1a1a');
                          rootStore.layout.setComponentBackgroundColor(
                            '#1a1a1a'
                          );
                        }

                        rootStore.settings.setDarkMode(
                          !rootStore.settings.darkMode
                        );
                      }}
                      color="primary"
                      checked={rootStore.settings.darkMode}
                    />
                  }
                  label={t('settings.Dark mode')}
                  labelPlacement="end"
                />
                <br />
                <Typography id="discrete-slider-small-steps" gutterBottom>
                  Grid size
                </Typography>
                <Slider
                  value={rootStore.settings.gridHeight}
                  aria-labelledby="discrete-slider-small-steps"
                  step={10}
                  marks
                  min={100}
                  max={500}
                  valueLabelDisplay="auto"
                  onChange={(event, value) => {
                    if (typeof value === 'number') {
                      rootStore.settings.setGridHeight(value);
                    }
                  }}
                />
                <br />
              </Paper>
            </Grid>
          </Grid>
        </Paper>
      </Grid>
    </Grid>
  );
}

export default observer(Layout);
