import * as React from 'react';
import CaesarCipher from '../../ciphers/cipherProtocols/CaesarCipher';
import { chosenAlphabet, writerToOutput, inputLoad, scroller } from '../../basicLayout';
import { Typography, Button, Dialog, DialogTitle, DialogContent, DialogActions, Box, TextField } from '@material-ui/core';
import { numberKey } from '../Analyzer';

export interface ICaesarAnalyzerProps {
    idInput: string,
    idOutput: string,
    idSwitch: string
}

export interface ICaesarAnalyzerState {
    caesarAnalyzerOutput: string
}

export default class CaesarAnalyzer extends React.Component<ICaesarAnalyzerProps, ICaesarAnalyzerState> {
    private hidePossible: boolean = true;
    private loadedKey: number = 0;
    private caesar: any = new CaesarCipher(this.props);

    constructor(props: ICaesarAnalyzerProps) {
        super(props);

        this.state = {
            caesarAnalyzerOutput: ""
        }

        this.caesarAnalyzerDialog = this.caesarAnalyzerDialog.bind(this);
    }

    // EXECUTES CAESAR CIPHER WITH COUNTED KEY FORM PREVIOUS SUBSTITUTION
    private isThisCaesar(key: number): string {
        var message: string = this.caesar.CaesarCipher(inputLoad().split(''), key);
        return message;
    }

    //  LIST OF ALL POSSIBILITIES OF CAESAR CIPHER
    private caesarPossibilities(usedKey: number) {
        var pointer: number = 0;
        var list: any = [''];
        if(usedKey >= 0) {
            for (var i = -chosenAlphabet.length + usedKey; i <= usedKey; i++) {
                list[pointer] =
                    <Typography key={pointer++} >
                        <p><b>KEY: {-i}:</b></p>
                        <p><i>{this.isThisCaesar(i)}</i></p>
                        <p>-------------------------------</p>
                    </Typography>;
            }
        }
        else if(usedKey < 0) {
            for (var y = chosenAlphabet.length + usedKey; y >= usedKey; y--) {
                list[pointer] = 
                    <Typography key={pointer++} >
                        <p><b>KEY: {-y}:</b></p>
                        <p><i>{this.isThisCaesar(y)}</i></p>
                        <p>-------------------------------</p>
                    </Typography>;
            }
        }

        return list;
    }

    private keySetter(): number {
        var isNotNan: boolean = !isNaN((document.getElementById('myNumberField') as HTMLInputElement)?.valueAsNumber);

        if(document.getElementById('myNumberField') && isNotNan) {
            var tmp: number = (document.getElementById('myNumberField') as HTMLInputElement).valueAsNumber;
            (document.getElementById('myNumberField') as HTMLInputElement).valueAsNumber = tmp;
            return tmp;
        } else {
            if(document.getElementById('myNumberField'))
                (document.getElementById('myNumberField') as HTMLInputElement).value = String(numberKey);
            return numberKey;
        }
    }

    private caesarAnalyzerDialog() {
        const [open, setOpen] = React.useState(false);
        const handleClickOpen = () => {
          setOpen(true);
        };
        const handleClose = () => {
          setOpen(false);
        };
    
        return (
          <div>
            <Button
                variant="text"
                size="small"
                disabled={this.hidePossible}
                color="secondary"
                onClick={handleClickOpen}
            >Other possibilities</Button>
            
            <Dialog
              open={open}
              onClose={handleClose}>
                <DialogTitle>Other Caesar cipher possibilities</DialogTitle>
                <DialogContent>
                    {this.caesarPossibilities(this.keySetter())}
                </DialogContent>
                <DialogActions style={{alignSelf: 'center'}}>
                <Box my={3}>
                    <Button onClick={handleClose} color="secondary" autoFocus>CLOSE</Button>
                </Box>
                </DialogActions>
            </Dialog>
          </div>
        );
    }
    
    public render() {        
        const handleClick = (event: React.MouseEvent<HTMLElement>) => {            
            this.loadedKey = this.keySetter();
            writerToOutput(this.isThisCaesar(this.loadedKey));
            
            scroller();

            if(this.loadedKey !== 0)
                this.hidePossible = false;
            this.forceUpdate();
        }
        
        return (
            <div>
                <Box my={2}>
                    <TextField
                        required
                        id="myNumberField"
                        label="Key"
                        type="number"
                        helperText="Movement key (alphabet movement)."
                        InputLabelProps={{
                            shrink: true,
                        }}
                        className='numberField'
                    />
                </Box>
                <Box my={2}>
                    <Button
                        id='action'
                        size="small"
                        variant="contained"
                        autoFocus
                        onClick={handleClick}>Is this Caesar?</Button>
                </Box>
                <this.caesarAnalyzerDialog />
            </div>
        );
    }
}
