import * as React from 'react';
import { Box, Button, ExpansionPanel, ExpansionPanelSummary, Typography, ExpansionPanelDetails, TableCell, Table, TableHead, TableRow, TableBody, Dialog, DialogTitle, DialogContent, DialogActions, Grid } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { writerToOutput, inputLoad, chosenAlphabet, regexp } from '../../basicLayout';

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

export interface IAtbashState {
    atbasOutput: string
}

export default class Atbash extends React.Component<IAtbashProps, IAtbashState> {
    private hebrewAlphabet: string[] = ['Aleph', 'Bet', 'Gimel', 'Daleth', 'Heh', 'Vav', 'Zayin', 'Het', 'Tet', 'Yodh', 'Kaph', 'Lamed', 'Mem', 'Nun', 'Samech', 'Ayin', 'Peh', 'Tzady', 'Koof', 'Reish', 'Shin', 'Taw'];
    private hebrewSymbols: string[] = ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ז', 'ח', 'ט', 'י', 'כ', 'ל', 'מ', 'נ', 'ס', 'ע', 'פ', 'צ', 'ק', 'ר', 'ש', 'ת'];
    public reverseAlphabet: string[] = chosenAlphabet.slice(0, chosenAlphabet.length).reverse();
    constructor(props: IAtbashProps) {
        super(props);

        this.state = {
            atbasOutput: ''
        }

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

    public AtbashCipher(alphabet: string[]): string {
        var input: string[] = inputLoad().split('');
        var message: string = '';

        input.forEach( e => {
            var upperCase: boolean = false;
            if(e.match(regexp)) {
                if(e.toLocaleUpperCase() === e) {
                    upperCase = true;
                    e = e.toLowerCase();
                }

                if((document.getElementById(this.props.idSwitch) as HTMLInputElement).checked)
                    e = this.reverseAlphabet[alphabet.indexOf(e)];
                else
                    e = alphabet[this.reverseAlphabet.indexOf(e)];

                if(upperCase)
                    e = e.toUpperCase();
                
                message += e;
            } else
                message += e;
        });

        return message;
    }

    private atbashDialog () {
        const [open, setOpen] = React.useState(false);
        const handleClickOpen = () => {
        setOpen(true);
        };
        const handleClose = () => {
        setOpen(false);
        };
        var number: number = 0;
        
        return (
        <div>
            <Button variant="outlined" color="secondary" onClick={handleClickOpen}>Hebrew alphabet table</Button>
            
            <Dialog
                open={open}
                onClose={handleClose}
                maxWidth='lg'>
                <DialogTitle>Hebrew alphabet</DialogTitle>
                <DialogContent>
                    <Box alignItems='center'>
                        <Table className="table">
                        <TableHead>
                            <TableRow>{
                                this.hebrewAlphabet.map( e =>
                                    <TableCell key={e} align="center" component="th" scope="row" style={{ padding: 5 }}>
                                    {e}
                                    </TableCell>
                            )}</TableRow>
                        </TableHead>
                        <TableBody>
                            <TableRow>{
                                this.hebrewSymbols.map( e =>
                                    <TableCell key={number++} align="center" component="th" scope="row" style={{ padding: 5 }}>
                                    {e}
                                    </TableCell>
                            )}</TableRow>
                        </TableBody>
                        </Table>
                    </Box>
                </DialogContent>
                <DialogActions style={{alignSelf: 'center'}}>
                    <Box my={3}>
                    <Button onClick={handleClose} color="secondary" autoFocus>CLOSE</Button>
                    </Box>
                </DialogActions>
            </Dialog>
        </div>
        );
    }

    public render() {
        this.reverseAlphabet = chosenAlphabet.slice(0, chosenAlphabet.length).reverse();
        const tableCellsAlphabet = chosenAlphabet.map( e =>
            <TableCell key={e} align="center" component="th" scope="row" style={{ padding: 3 }}>
                {e}
            </TableCell>
        );
        const tableCellsMovedAlphabet = this.reverseAlphabet.map( e =>
            <TableCell key={e} align="center" component="th" scope="row" style={{ padding: 3 }}>
                {e}
            </TableCell>
        );

        return (
            <div>
            <Box my={2}>
              <Typography style={{ color: '#808080' }}>- - - <i>No settings available!</i> - - -</Typography>
            </Box>
            <Box marginTop={2}>
                <Button
                    size="large"
                    variant="contained"
                    color="secondary"
                    autoFocus
                    onClick={ () => {
                        this.forceUpdate();
                        writerToOutput(this.AtbashCipher(chosenAlphabet));
                    }}
                >Atbash go!</Button>
            </Box>

            <Box my={5} boxShadow={3}>
                <Table className="table">
                    <TableHead>
                        <TableRow>
                            {tableCellsAlphabet}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        <TableRow>
                            {tableCellsMovedAlphabet}
                        </TableRow>
                    </TableBody>
                </Table>
            </Box>

            <Box marginTop={10}>
                <ExpansionPanel>
                    <ExpansionPanelSummary
                        id="aboutAtbashCipher"
                        expandIcon={<ExpandMoreIcon />}
                    >
                        <Typography
                            color="secondary"
                            className='heading'
                        ><b>ABOUT Atbash</b></Typography>
                    </ExpansionPanelSummary>
                    <ExpansionPanelDetails>
                        <Grid container className='columnGrid'>
                            <Typography style={{ color: '#808080' }} align='left' component={"div"}>                            
                                <p>
                                    <b>Atbash</b> (Hebrew: אתבש‎, transliterated "Abtaš") is a simple <i>monoalphabetic substitution cipher</i> that uses reverted alphabet for letter substitution. 
                                </p>
                            </Typography>

                            <Grid container className='columnGrid'>
                                <img
                                    src="http://www.stud.feec.vutbr.cz/~xrysav29/cipher_pics/atbash_encryption.PNG"
                                    alt='Atbash encryption'
                                    width="70%"/>
                            </Grid>
                            <Typography variant='caption' style={{ color: '#808080' }} align='center'>
                                <b>Img 1.:</b> <i>Encryption of plaintext using Atbash cipher.</i>
                            </Typography>

                            <Typography style={{ color: '#808080' }} align='left' component={"div"}>
                                <p>
                                    This cipher was invented by Hebrews and it's name is derived from the first, last, second, and second to last Hebrew letters (Aleph–Taw–Bet–Shin). 
                                    Cipher was originally used to encrypt the Hebrew alphabet (table below).
                                </p>
                                <div style={{textAlign: "center"}}><this.atbashDialog /></div>
                            </Typography>
                        </Grid>
                    </ExpansionPanelDetails>
                </ExpansionPanel>
            </Box>
        </div>
        );
    }
}
