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

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

import { observer } from 'mobx-react';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { ipcRenderer } from 'electron';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { getRootStore } from '../../models/root-store';

const useStyles = makeStyles({
  content: {
    alignItems: 'center',
  },
  root: {
    flexGrow: 1,
  },
  paper: {
    backgroundColor: '#95A5A6',
    textAlign: 'center',
  },
  paperInput: {
    backgroundColor: '#666666',
    alignItems: 'center',
    justifyContentItems: 'baseline',
    padding: 10,
    margin: 10,
    minHeight: 70,
  },
  paperInputNested: {
    backgroundColor: '#7d7d7d',
    alignItems: 'center',
    justifyContentItems: 'baseline',
    padding: 10,
    margin: 10,
    minHeight: 70,
  },
  paperUpdate: {
    backgroundColor: '#EAEAEA',
    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,
  },
});

const languages = [
  { id: 0, name: 'none', label: 'Not used' },
  { id: 1, name: 'en', label: 'English' },
  { id: 2, name: 'nl', label: 'Nederlands' },
  { id: 3, name: 'fr', label: 'Français' },
  { id: 4, name: 'de', label: 'Deutsche' },
  { id: 5, name: 'it', label: 'Italiano' },
  { id: 6, name: 'es', label: 'Española' },
  { id: 7, name: 'fr-ca', label: 'Français canadien' },
  { id: 8, name: 'en-ca', label: 'Canadian english' },
  { id: 9, name: 'en-us', label: 'English US' },
  { id: 10, name: 'es-us', label: 'Española American' },
];

function ApplicationSettings() {
  const classes = useStyles();
  const [rootStore] = useState(() => getRootStore());
  const [selectedStartDate, setSelectedStartDate] = React.useState<
    Date | number | null
  >(rootStore.ticketList.defaultStart);
  const [selectedEndDate, setSelectedEndDate] = React.useState<
    Date | number | null
  >(rootStore.ticketList.defaultEnd);

  const history = useNavigate();

  const handleStartDateChange = (e: any) => {
    setSelectedStartDate(e);
    rootStore.ticketList.setDefaultStart(e);
  };

  const handleEndDateChange = (e: any) => {
    setSelectedEndDate(e);
    rootStore.ticketList.setDefaultEnd(e);
  };

  const { t } = useTranslation();

  return (
    <Grid container justifyContent="center" spacing={0}>
      <Grid item xs={12} md={6} lg={6} xl={6}>
        <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"
            >
              Application behaviour
            </Typography>
          </Grid>
          <Grid item xs={12} md={12} lg={12} xl={12}>
            <Paper className={classes.paperInput}>
              <Typography className={classes.content} variant="h6">
                General behaviour
              </Typography>
              <br />
              
              <FormControlLabel
                control={
                  <Checkbox
                    onClick={() => {
                      rootStore.settings.setAutoStart(
                        !rootStore.settings.autoStart
                      );
                      ipcRenderer.send(
                        'autoStart',
                        rootStore.settings.autoStart
                      );
                    }}
                    color="primary"
                    checked={rootStore.settings.autoStart}
                  />
                }
                label={t('settings.Automatic start of application')}
                labelPlacement="end" 
              />
              <br />
              <FormControlLabel
                control={
                  <Checkbox
                    onClick={() => {
                      rootStore.settings.setFullscreen(
                        !rootStore.settings.fullscreen
                      );
                      ipcRenderer.send(
                        'fullscreen',
                        rootStore.settings.fullscreen
                      );
                    }}
                    color="primary"
                    checked={rootStore.settings.fullscreen}
                  />
                }
                label={t('settings.Fullscreen')}
                labelPlacement="end"
              />
              <br />
              <FormControlLabel
                control={
                  <Checkbox
                    onClick={() => {
                      rootStore.settings.setHideCursor(
                        !rootStore.settings.hideCursor
                      );
                      ipcRenderer.send(
                        'hideCursor',
                        rootStore.settings.hideCursor
                      );
                    }}
                    color="primary"
                    checked={rootStore.settings.hideCursor}
                  />
                }
                label="Hide cursor"
                labelPlacement="end"
              />
              <br />
              <FormControlLabel
                control={
                  <Checkbox
                    onClick={() => {
                      rootStore.settings.setTouchScreen(
                        !rootStore.settings.touchScreen
                      );
                    }}
                    color="primary"
                    checked={rootStore.settings.touchScreen}
                  />
                }
                label="Touchscreen improvements"
                labelPlacement="end"
              />
              <br />
              <br />
            </Paper>
            <Paper className={classes.paperInput}>
              <Typography className={classes.content} variant="h6">
                {t('settings.Default start of the day')}
              </Typography>
              <TimePicker
                ampm={false}
                value={selectedStartDate}
                onChange={handleStartDateChange}
              />
              <br />
              <br />
              <Typography className={classes.content} variant="h6">
                {t('settings.Default end of the day')}
              </Typography>
              <TimePicker
                ampm={false}
                value={selectedEndDate}
                onChange={handleEndDateChange}
              />
            </Paper>
          </Grid>
        </Paper>
      </Grid>
      <Grid item xs={12} md={6} lg={6} xl={6}>
        <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"
            >
              Languages front-end
            </Typography>
          </Grid>
          <Grid item xs={12} md={12} lg={12} xl={12}>
            <Paper className={classes.paperInput}>
              <br />
              <Autocomplete
                id="Mode"
                value={languages[rootStore.settings.firstLanguage]}
                options={languages}
                getOptionLabel={(option) => option.label}
                onChange={async (event: any, newValue: any) => {
                  console.log('setting firstLang to: ', newValue.id);
                  rootStore.settings.setFirstLanguage(newValue.id);
                }}
                disableClearable
                selectOnFocus
                clearOnBlur
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label="First language"
                    variant="outlined"
                  />
                )}
              />
              <br />
              <br />
              <br />
              <Autocomplete
                id="Mode"
                value={languages[rootStore.settings.secondLanguage]}
                options={languages}
                getOptionLabel={(option) => option.label}
                onChange={async (event: any, newValue: any) => {
                  rootStore.settings.setSecondLanguage(newValue.id);
                }}
                disableClearable
                selectOnFocus
                clearOnBlur
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label="Second language"
                    variant="outlined"
                  />
                )}
              />
              <br />
              <br />
              <br />
              <Autocomplete
                id="Mode"
                value={languages[rootStore.settings.thirdLanguage]}
                options={languages}
                getOptionLabel={(option) => option.label}
                onChange={async (event: any, newValue: any) => {
                  rootStore.settings.setThirdLanguage(newValue.id);
                }}
                disableClearable
                selectOnFocus
                clearOnBlur
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label="Third language"
                    variant="outlined"
                  />
                )}
              />
              <br />
              <br />
              <Button
                fullWidth
                variant="contained"
                color="primary"
                onClick={() => history('/languages')}
                style={{ padding: 15 }}
              >
                Custom fields
              </Button>
              <br />
              <br />
            </Paper>
          </Grid>
        </Paper>
      </Grid>
    </Grid>
  );
}

export default observer(ApplicationSettings);
