import * as React from 'react';
import { Box, TextField, Button, TableCell, Table, TableHead, TableRow, TableBody, Typography } from '@material-ui/core';
import { writerToOutput, passwordLoad, chosenAlphabet, myAlert, scroller } from '../../basicLayout';
import PasswordCipher from '../../ciphers/cipherProtocols/PasswordCipher';
import { passwordMod } from '../Analyzer';

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

export interface IPasswordAnalyzerState {
    passwordAnalyerOutput: string
}

export default class PasswordAnalyzer extends React.Component<IPasswordAnalyzerProps, IPasswordAnalyzerState> {
    private password: any = new PasswordCipher(this.props);
    private userPsswd: string[] = [];

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

        this.state = {
            passwordAnalyerOutput: ''
        }
  }

  private isThisPassword() {
    var message: string = this.password.PasswordCipher(passwordLoad("myPasswordPsswdField").toLowerCase(), true);
    return message;
  }

  public render() {
    const handleClick = (event: React.MouseEvent<HTMLElement>) => {  
      if((document.getElementById("myPasswordPsswdField") as HTMLInputElement).value === '') {
        var tmp = myAlert('Please fill the password field!', 'enter', ['secret']);
        if( tmp != null )
          (document.getElementById("myPasswordPsswdField") as HTMLInputElement).value = String(tmp);
        else
          return;
      }

      writerToOutput(this.isThisPassword());
      
      scroller();
      
      this.forceUpdate();
    }

    this.userPsswd = passwordMod;
    var key: number = 0;
    const tableCellsAlphabet = chosenAlphabet.map((e: React.ReactNode) =>
      <TableCell key={key++} align="center" component="th" scope="row" style={{ padding: 3 }}>
        {e}
      </TableCell>
    );
    const tableCellsUserPsswd = this.userPsswd.map((e: React.ReactNode) =>
      <TableCell key={key++} align="center" component="th" scope="row" style={{ padding: 3 }}>
        {e}
      </TableCell>
    );

    return (
        <div>
          <Box marginBottom={2}>
            <TextField
              required
              id="myPasswordPsswdField"
              label="Password"
              helperText="Password (alphabet modification)."
              InputLabelProps={{
                shrink: true
              }}
              className='smallTextField'
            />
          </Box>
          <Box my={2}>
            <Button
              id='action'
              size="small"
              variant="contained"
              autoFocus
              onClick={handleClick}>Is this Keyword?</Button>
          </Box>
          <Box marginTop={5} boxShadow={3}>
            <Table id='table' className="table" padding="default">
              <TableHead>
                <TableRow>
                  {tableCellsUserPsswd}
                </TableRow>
              </TableHead>
              <TableBody>
                <TableRow>
                  {tableCellsAlphabet}
                </TableRow>
              </TableBody>
            </Table>
          </Box>
          <Box my={2}>
              <Typography variant = 'caption' color='textSecondary'>
                  In order this cipher to work You have to figure out the password on your own (Try to make some substitutions ;-) ).
              </Typography>
          </Box>
        </div>
    );
  }
}
