import * as React from 'react';
import { Typography, Box, AppBar, Tabs, Tab } from '@material-ui/core';
import Atbash from './cipherProtocols/Atbash';
import CaesarCipher from './cipherProtocols/CaesarCipher';
import Kryptos from './cipherProtocols/Kryptos';
import PasswordCipher from './cipherProtocols/PasswordCipher';
import VernamCipher from './cipherProtocols/VernamCipher';
import VigenereCipher from './cipherProtocols/VigenereCipher';

//  PROPS INTERFACE FOR TABPANEL:
interface TabPanelProps {
    children?: React.ReactNode;
    index: any;
    value: any;
  }
  
export function TabPanel(props: TabPanelProps) {
    const { children, value, index, ...other } = props;
    return (
        <Typography
          component="div"
          role="tabpanel"
          hidden={ value !== index }
          id={`${index}`}
          aria-labelledby={`${index}`}
          style={{backgroundColor: '#ffffff'}}
          {...other}
        >
          <Box p={3}>{children}</Box>
        </Typography>
    );
}

export function tabProps(index: any) {
    return {
        id: `${index}`
    };
}


//  CIPHERTAB CLASS + IT'S INTERFACES (props & states)
export interface ICipherTabProps {
    idInput: string,
    idOutput: string,
    idSwitch: string
}

export interface ICipherTabState {
    cipherTabOutput: string
}

export default class CipherTab extends React.Component<ICipherTabProps, ICipherTabState> {
    constructor(props: ICipherTabProps) {
        super(props);

        this.state = {
            cipherTabOutput: ''
        }

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

    private CipherTab() {
        const [value, setValue] = React.useState(0);
        
        const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
          setValue(newValue);
        }
    
        return (
          <div>
            <Box boxShadow={3}>
              <AppBar position="static" color="default">
                <Tabs
                  id='tabs'
                  value={value}
                  indicatorColor="primary"
                  textColor="inherit"
                  variant="fullWidth"
                  scrollButtons="auto"
                  onChange={handleChange}
                >
                  <Tab
                    label="Atbash Cipher"
                    style={{backgroundColor: '#85d38f'}}
                    wrapped
                    {...tabProps(0)}
                    onClick={ () => {
                      (document.getElementById(this.props.idSwitch) as HTMLInputElement).disabled = false;
                    }}
                  />
                  <Tab
                    label="Caesar Cipher"
                    style={{backgroundColor: '#85d38f'}}
                    wrapped
                    {...tabProps(1)}
                    onClick={ () => {
                      (document.getElementById(this.props.idSwitch) as HTMLInputElement).disabled = false;
                    }}
                  />
                  <Tab
                    label="Keyword Cipher"
                    style={{backgroundColor: '#85d38f'}}
                    wrapped
                    {...tabProps(2)}
                    onClick={ () => {
                      (document.getElementById(this.props.idSwitch) as HTMLInputElement).disabled = false;
                    }}
                  />
                  <Tab
                    label="Vigenère Cipher"
                    style={{backgroundColor: '#a4dfff'}}
                    wrapped
                    {...tabProps(3)}
                    onClick={ () => {
                      (document.getElementById(this.props.idSwitch) as HTMLInputElement).disabled = false;
                    }}
                  />
                  <Tab
                    label="Kryptos, part I & II"
                    style={{backgroundColor: '#a4dfff'}}
                    wrapped
                    {...tabProps(4)}
                    onClick={ () => {
                      (document.getElementById(this.props.idSwitch) as HTMLInputElement).disabled = false;
                    }}
                  />
                  <Tab
                    label="Vernam Cipher"
                    style={{backgroundColor: '#a4dfff'}}
                    wrapped
                    {...tabProps(5)}
                    onClick={ () => {
                      (document.getElementById(this.props.idSwitch) as HTMLInputElement).disabled = false;
                    }}
                  />
                </Tabs>
              </AppBar>
    
              <TabPanel value={value} index={0}>
                <Atbash idInput={this.props.idInput} idOutput={this.props.idOutput} idSwitch={this.props.idSwitch}/>
              </TabPanel>
              <TabPanel value={value} index={1}>
                <CaesarCipher idInput={this.props.idInput} idOutput={this.props.idOutput} idSwitch={this.props.idSwitch}/>
              </TabPanel>
              <TabPanel value={value} index={2}>
                <PasswordCipher idInput={this.props.idInput} idOutput={this.props.idOutput} idSwitch={this.props.idSwitch}/>
              </TabPanel>
              <TabPanel value={value} index={3}>
                <VigenereCipher idInput={this.props.idInput} idOutput={this.props.idOutput} idSwitch={this.props.idSwitch}/>
              </TabPanel>
              <TabPanel value={value} index={4}>
                <Kryptos idInput={this.props.idInput} idOutput={this.props.idOutput} idSwitch={this.props.idSwitch}/>
              </TabPanel>
              <TabPanel value={value} index={5}>
                <VernamCipher idInput={this.props.idInput} idOutput={this.props.idOutput} idSwitch={this.props.idSwitch}/>
              </TabPanel>
            </Box>
          </div>
        );
    }

    public render() {
        return (
        <div>
            <this.CipherTab />
        </div>
        );
    }
}
