import * as React from 'react';
import { Box, Grid, ExpansionPanel, ExpansionPanelSummary, Typography, ExpansionPanelDetails, TextField, Button, Link, Container } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { chosenAlphabet, passwordLoad, writerToOutput, myAlert, inputLoad } from '../../basicLayout';
import PasswordCipher from './PasswordCipher';
import VigenereCipher from './VigenereCipher';

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

export interface IKryptosState {
    kryptosOutput: string
}

export default class Kryptos extends React.Component<IKryptosProps, IKryptosState> {
    constructor(props: IKryptosProps) {
        super(props);

        this.state = {
            kryptosOutput: ''
        }
    }

    private KryptosCipher(EDswitch: boolean): string {
        var input: string[] = inputLoad().split('');
        var passwordVigenere: string[] = passwordLoad("passwordKVigener").toLowerCase().split('');
        var passwordPassword: string = passwordLoad("passwordKPassword").toLowerCase();

        var passwordAlphabet: string[] = new PasswordCipher(this.props).makeCipherAlphabet(chosenAlphabet, passwordPassword);
        var message: string = new VigenereCipher(this.props).VigenereCipher(input, passwordAlphabet, passwordVigenere, EDswitch);

        return message;
    }

    public render() {
        var date: Date = new Date();
        date.setDate(25);
        date.setMonth(5);
        date.setFullYear(2020);

        var stringDate: string = date.toDateString();

        //  FOR VIGENERE --> ENCRYPT OR DECRYPT?
        var EDswitch: boolean = false;
        if((document.getElementById(this.props.idSwitch) as HTMLInputElement)?.checked)
            EDswitch = true;

        
        return (
        <div>
            <Box marginTop={2}>
                <Grid container className='columnGrid'>
                    <Grid container className='rowGrid'>
                        <Box my={2}>
                            <TextField
                                required
                                id="passwordKVigener"
                                label="Password for Vigenère cipher"
                                defaultValue='PALIMPSEST'
                                helperText="Please typedown the chosen password."
                                InputLabelProps={{
                                    shrink: true,
                                }}
                                className='smallTextField'
                            />
                        </Box>
                        <Box my={2}>
                            <TextField
                                required
                                id="passwordKPassword"
                                label="Password for Password-Modifed cipher"
                                defaultValue='KRYPTOS'
                                helperText="Please typedown the chosen password."
                                InputLabelProps={{
                                    shrink: true,
                                }}
                                className='smallTextField'
                            />
                        </Box>
                    </Grid>

                    <Container>
                        <Button
                            size="large"
                            variant="contained"
                            color="primary"
                            autoFocus
                            onClick={ () => {
                                this.forceUpdate();

                                if ((document.getElementById("passwordKVigener") as HTMLInputElement)?.value === '') {
                                    var tmpV = myAlert("Password for Vigener cipher is not defined! Please define the password:", 'enter', ['palimpsest']);
                                    if( tmpV != null )
                                        (document.getElementById("passwordKVigener") as HTMLInputElement).value = String(tmpV);
                                    else
                                        return;
                                }

                                if ((document.getElementById("passwordKPassword") as HTMLInputElement)?.value === '') {
                                    var tmpP = myAlert("Password for Password-modifed cipher is not defined! Please define the password:", 'enter', ['kryptos']);
                                    if( tmpP != null )
                                        (document.getElementById("passwordKPassword") as HTMLInputElement).value = String(tmpP);
                                    else
                                        return;
                                }

                                writerToOutput(this.KryptosCipher(EDswitch));
                            }}
                        >Kryptos go!</Button>
                    </Container>
                </Grid>
            </Box>

            <Box marginTop={10}>
                <ExpansionPanel>
                    <ExpansionPanelSummary
                        id="aboutKryptosCipher"
                        expandIcon={<ExpandMoreIcon />}
                    >
                        <Typography
                            color="primary"
                            className='heading'
                        ><b>ABOUT Kryptos</b></Typography>
                    </ExpansionPanelSummary>
                    <ExpansionPanelDetails>
                        <Grid container className='columnGrid'>
                            <Typography style={{ color: '#808080' }} align='left' component={"div"}>
                                <p>
                                    <b>Kryptos</b> is a skulpture on the grounds of Central Intelligence Agency (CIA) in Langley, California by Jim Sanborn. 
                                    This sculpture bears four encrypted messages.
                                </p>
                            </Typography>

                            <Grid container className='columnGrid'>
                                <img
                                    src="http://www.stud.feec.vutbr.cz/~xrysav29/cipher_pics/kryptos_sculptor.jpg"
                                    alt="Kryptos sculptor by Jim Sandborn (CC BY-SA)"
                                    width="50%"/>
                            </Grid>
                            <Typography variant='caption' style={{ color: '#808080' }} align='center'>
                                <b>Img 1.:</b> <i>Kryptos sculptor by Jim Sandborn (
                                <Link color="primary" href="https://creativecommons.org/licenses/by-sa/3.0" target="_blank" rel="noopener noreferrer">
                                    CC BY-SA
                                </Link>, <u>source</u>:{' '}
                                <Link color="primary" href="https://commons.wikimedia.org/wiki/File:Kryptos_sculptor.jpg" target="_blank" rel="noopener noreferrer">
                                    commons.wikimedia.org
                                </Link>).</i>
                            </Typography>

                            <Typography style={{ color: '#808080' }} align='left' component={"div"}>
                                <p>
                                    First two ciphers use the combination of Vigenère cipher and password-modified alphabet.
                                    The first part uses two passwords: PALIMPSETS for Vigenère cipher and KRYPTOS for modification of the used alphabet. 
                                    In the second part, the passwords ABSCISSA and again KRYPTOS are used.
                                </p>
                                <p>
                                    Third cipher uses for encryption process{' '}
                                    <Link color="primary" href="https://en.wikipedia.org/wiki/Transposition_cipher#Route_cipher" target="_blank" rel="noopener noreferrer">
                                        Route Transposition</Link> 
                                    {' '}followed by a <Link color="primary" href="http://practicalcryptography.com/ciphers/columnar-transposition-cipher/" target="_blank" rel="noopener noreferrer">
                                        Keyed Columnar Transposition</Link>
                                    {' '}with key 0362514 (aka 'KRYPTOS').
                                </p>
                                <p>
                                    The fourth cipher is still a mystery (last revised on <i>{stringDate}</i> ). Promised reward for decryption is $1 million. 
                                    I guess I have Your attention now? :) (Because, who wouldn't like to own $1 million...)
                                </p>
                                Here are some websites containing informations about Kryptos:
                                <ul>
                                    <li><Link color='primary' href='https://elonka.com/kryptos/faq.html' target="_blank" rel="noopener noreferrer">
                                        FAQ Kryptos</Link></li>
                                    <li><Link color='primary' href='https://www.cia.gov/about-cia/headquarters-tour/kryptos/?tab=list-2' target="_blank" rel="noopener noreferrer">
                                        Central Intelligence Agency - Kryptos</Link></li>
                                    <li><Link color='primary' href='https://en.wikipedia.org/wiki/Kryptos' target="_blank" rel="noopener noreferrer">
                                        Wikipedia, the Free Encyclopedia - Kryptos</Link></li>
                                    <li><Link color='primary' href='https://math.ucsd.edu/~crypto/Projects/KarlWang/index.html' target="_blank" rel="noopener noreferrer">
                                        Mathematics 187: "Introduction to Cryptography" - The Kryptos Sculpture</Link></li>
                                </ul>
                            </Typography>
                        </Grid>
                    </ExpansionPanelDetails>
                </ExpansionPanel>
            </Box>
        </div>
        );
    }
}