import * as React from 'react';
import { Box, AppBar, Typography, Button, Grid, ButtonGroup } from '@material-ui/core';
import { chosenAlphabet, writerToOutput } from '../basicLayout';
import { tabProps, TabPanel } from '../ciphers/CipherTab';
import CaesarAnalyzer from './isThisCiphers/CaesarAnalyzer';
import Atbash from '../ciphers/cipherProtocols/Atbash';
import PasswordAnalyzer from './isThisCiphers/PasswordAnalyzer';
import VigenereAnalyzer from './isThisCiphers/VigenereAnalyzer';

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

export interface IIsThisState {
    isThisOutput: string
}

export default class IsThis extends React.Component<IIsThisProps, IIsThisState> {
  constructor(props: IIsThisProps) {
    super(props);

    this.state = {
        isThisOutput: ''
    }

    this.isThisMenu = this.isThisMenu.bind(this);
    this.AtbashButton = this.AtbashButton.bind(this);
  }

  private isThisAtbash(): string {
    var message: string = new Atbash(this.props).AtbashCipher(chosenAlphabet);
    return message;
  }

  private AtbashButton() {
    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
      const anchor = document.querySelector('#\\root');
  
      if (anchor) {
        anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }

      writerToOutput(this.isThisAtbash());
      this.forceUpdate();
    }
    
    return(
      <Button
        id='action'
        size="small"
        variant="contained"
        autoFocus
        onClick={handleClick}>Is This Abtash?</Button>
    )
  }

  private isThisMenu() {
    const [ value, setValue ] = React.useState(0);
    
    return (
      <div>
        <Box>
          <AppBar position="static" style={{ backgroundColor: '#ECECEC' }}>
            <Box my={1}>
              <Typography color='textPrimary'><b>Is this...?</b></Typography>
              <Grid container className='rowGrid'>
                <ButtonGroup id='buttonGroup' variant="text" style={{ color: '#000000' }} fullWidth>
                  <Button
                    size="small"
                    variant="text"
                    {...tabProps(0)}
                    onClick={() => {
                      setValue(0);
                    }}>Atbash Cipher</Button>
                  <Button
                    size="small"
                    variant="text"
                    {...tabProps(1)}
                    onClick={ () => {
                      setValue(1);
                    }}>Caesar Cipher</Button>
                  <Button
                    size="small"
                    variant="text"
                    {...tabProps(2)}
                    onClick={ () => {
                      setValue(2);
                    }}>Keyword Cipher</Button>
                  <Button
                    size="small"
                    variant="text"
                    {...tabProps(3)}
                    onClick={ () => {
                      setValue(3);
                    }}>Vigener Cipher</Button>
                </ButtonGroup>
              </Grid>
            </Box>
          </AppBar>

          <TabPanel value={value} index={0}>
            <Box my={2}>
              <Typography style={{ color: '#808080' }}>- - - <i>No settings available!</i> - - -</Typography>
            </Box>
            <this.AtbashButton />
          </TabPanel> 
          <TabPanel value={value} index={1}>
            <CaesarAnalyzer idInput={this.props.idInput} idOutput={this.props.idOutput} idSwitch={this.props.idSwitch}/>
          </TabPanel>
          <TabPanel value={value} index={2}>
            <PasswordAnalyzer idInput={this.props.idInput} idOutput={this.props.idOutput} idSwitch={this.props.idSwitch}/>
          </TabPanel>
          <TabPanel value={value} index={3}>
            <VigenereAnalyzer idInput={this.props.idInput} idOutput={this.props.idOutput} idSwitch={this.props.idSwitch}/>
          </TabPanel>
        </Box>
      </div>
    );
  }
  
  public render() {
    return (
      <div>
        <this.isThisMenu />            
      </div>
    );
  }
}