import './App.css';
import 'antd/dist/antd.dark.css';

import React, { Component } from "react";
import { Alert, Tooltip, message, Row, Col, Statistic, Button, Layout, Tabs, Typography, Menu } from 'antd';
import { QuestionCircleOutlined, InfoCircleOutlined, DeploymentUnitOutlined, RocketOutlined, ToolOutlined, UserOutlined, HomeOutlined, PlusOutlined, SettingOutlined, UnorderedListOutlined, QuestionOutlined } from '@ant-design/icons';

import data from "./jsx/data/data";

import { getAlgorithms } from './jsx/data/algorithms';

import EventBus from "./jsx/eventbus/EventBus";

import NewTask from './jsx/newtask';
import Settings from './jsx/settings';
import Tools from './jsx/tools';
import Tasks from './jsx/tasks';
import Help from './jsx/help';
import About from './jsx/about';
import TasksStats from './jsx/stats/tasks';

const { TabPane } = Tabs;
const { Header, Footer, Sider } = Layout;
const { Text, Title } = Typography;

class App extends Component {
	constructor(props) {
		super(props);

		data.callback = () => {
			EventBus.dispatch("dataUpdate");
		};
		data.getHashes();
		data.getAlgorithms();
		data.getDictionaries();
		data.getRules();
		data.getMasks();

		this.onSelectMenu = this.onSelectMenu.bind(this);

		this.newTaskView = <NewTask />;
		this.tasksView = <Tasks />;
		this.settingsView = <Settings />;
		this.toolsView = <Tools />;
		this.helpView = <Help />;
		this.aboutView = <About />;

		this.state = {
			version: undefined,
			currentView: "New Task",

			isLoadedHashcat: undefined
		}
	}

	init() {
		if (typeof window.GOgetVersion === "function") {
			window.GOgetVersion().then(
				response => {
					this.setState({
						version: response
					});
				},
				error => {
					message.warning("Failed to get version"  + " " + error);
				}
			);
		}
		if (typeof window.GOrestoreTasks === "function") {
			window.GOrestoreTasks().then(
				() => null,
				error => {
					message.warning("Failed to restore tasks" + " " + error);
				}
			);
		}
	}

	setView(view) {
		this.setState({
			currentView: view
		});
	}

	onSelectMenu(e) {
		this.setView(e.key);
	}

	componentDidMount() {
		EventBus.on("taskUpdate", "App", (taskUpdate) => {
			TasksStats._update(taskUpdate);
			EventBus.dispatch("tasksUpdate");
		});
		EventBus.on("taskDelete", "App", (taskID) => {
			TasksStats._delete(taskID);
			EventBus.dispatch("tasksUpdate");
		});
		EventBus.on("dataUpdate", "App", () => {
			this.setState({
				isLoadedHashcat: Object.keys(getAlgorithms()).length > 0
			});
		});
		this.init();
	}

	componentWillUnmount() {
		EventBus.remove("taskUpdate", "App");
		EventBus.remove("taskDelete", "App");
		EventBus.remove("dataUpdate", "App");
	}

	render() {
		return (
			<Layout>
				<Sider
					style={{
						overflow: 'auto',
						height: '100vh',
						position: 'fixed',
						left: 0
					}}
					collapsed
				>
					<Menu theme="dark" onSelect={this.onSelectMenu} defaultSelectedKeys={[this.state.currentView]} mode="inline">
						<Menu.Item key="New Task" icon={<PlusOutlined />}>
							New Task
						</Menu.Item>
						<Menu.Item key="Tasks" icon={<UnorderedListOutlined />}>
							Tasks
						</Menu.Item>
						<Menu.Item key="Settings" icon={<SettingOutlined />}>
							Settings
						</Menu.Item>
						<Menu.Divider />
						<Menu.Item key="Tools" icon={<DeploymentUnitOutlined />}>
							Tools
						</Menu.Item>
						<Menu.Divider />
						<Menu.Item key="Help" icon={<QuestionCircleOutlined />}>
							Help
						</Menu.Item>
						<Menu.Item key="About" icon={<InfoCircleOutlined />}>
							About
						</Menu.Item>
					</Menu>
				</Sider>

				<div style={{ marginLeft: '80px'}}></div>

				<Layout style={{ height: "100vh" }}>
					<Header
						style={{
							display: 'flex',
							alignItems: 'center',
							position: 'fixed',
							zIndex: 1,
							width: '100%',
							backgroundColor: '#000',
							borderBottom: '1px #1d1d1d solid'
						}}
					>
						<img style={{ height: '100%'}} src={require('./images/Icon.png').default} />
						<Title level={3} style={{ margin: '0 10px', color: '#fff' }}>
							hashcat.launcher
						</Title>
						<span>
							{this.state.version ? (
								this.state.version === "dev" ? (
									"dev"
								) : (
									"v" + this.state.version
								)
							) : "dev"}
						</span>
					</Header>

					<div style={{ marginTop: '64px'}}></div>

					{this.state.isLoadedHashcat === false && (
						<Alert
							style={{ maxHeight: "38px" }}
							type="warning"
							message={
								<Tooltip
									title={
										<>
											hashcat is expected to be in the same directory as hashcat.launcher
											inside a subfolder <Text code>/hashcat</Text>
										</>
									}
								>
									hashcat not found
								</Tooltip>
							}
							banner
						/>
					)}

					<div
						style={{ display: this.state.currentView === "New Task" ? "block" : "none" }}
					>
						{this.newTaskView}
					</div>

					<div
						style={{
							display: this.state.currentView === "Tasks" ? "flex" : "none",
							flexDirection: "column",
							flex: "1 0 auto",
							maxHeight: this.state.isLoadedHashcat === false ? "calc(100% - 64px - 38px)" : "calc(100% - 64px)"
						}}
					>
						{this.tasksView}
					</div>

					<div
						style={{ display: this.state.currentView === "Settings" ? "block" : "none" }}
					>
						{this.settingsView}
					</div>

					<div
						style={{ display: this.state.currentView === "Tools" ? "block" : "none" }}
					>
						{this.toolsView}
					</div>

					<div
						style={{ display: this.state.currentView === "Help" ? "block" : "none" }}
					>
						{this.helpView}
					</div>

					<div
						style={{ display: this.state.currentView === "About" ? "block" : "none" }}
					>
						{this.aboutView}
					</div>
				</Layout>
			</Layout>
		)
	}
}

export default App;