import React, { useCallback, useContext, useEffect, useState } from 'react';
import { ClientContext } from './contexts/clientProvider';
import { Container, Row, Col, ListGroup, Alert, Card } from 'react-bootstrap';
import { Project } from './core/project';

//Pages
import ProjectDashboard from './components/dashboard/ProjectCenter';
import Ganache from './components/dashboard/Ganache';
import Scripts from './components/dashboard/Scripts';
import Imports from './components/dashboard/Imports';

//Background Pages
import ViewPath from './components/dashboard/path/View';
import PathEditor from './components/dashboard/path/Editor';

//utils
import { cutLongString, isProduction } from './utils/helpers';

/**
 * Just add below
 */
const Pages = {
    Project: ProjectDashboard,
    Ganache,
    Scripts,
    Imports,
};

const BackgroundPages = {
    ViewPath,
    PathEditor,
};

function Dashboard({ onHide }) {
    const client = useContext(ClientContext);
    const [selectedTab, setSelectedTab] = useState<
        keyof typeof Pages | keyof typeof BackgroundPages
    >('Project');
    const [selectedProject, setSelectedProject] = useState<Project>(
        client.project
    );
    const [Component, setComponent] = useState<JSX.Element>(null);

    const selectTab = useCallback(
        (
            tab: keyof typeof Pages | keyof typeof BackgroundPages,
            props?: any
        ) => {
            //goto top of page
            window.scrollTo(0, 0);
            setComponent(
                React.createElement(Pages[tab] || BackgroundPages[tab], {
                    project: selectedProject,
                    selectTab: selectTab,
                    ...(props || {}),
                })
            );
            setSelectedTab(tab as any);
        },
        [selectedProject]
    );

    useEffect(() => {
        selectTab('Project');
    }, [selectTab]);

    return (
        <>
            {client.loaded ? (
                <>
                    <link
                        href="https://bootswatch.com/5/spacelab/bootstrap.min.css"
                        rel="stylesheet"
                        crossOrigin="anonymous"
                    />
                    <script
                        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
                        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
                        crossOrigin="anonymous"
                    ></script>
                    <Container fluid>
                        <Row className="bg-dark text-white pt-1">
                            <Col lg={3} className="text-center pt-1">
                                <h1
                                    className="text-white"
                                    style={{
                                        fontSize: '2.5rem',
                                    }}
                                >
                                    ∞<b>Mint</b>{' '}
                                    <span
                                        className="badge bg-info"
                                        style={{
                                            fontSize: '0.8rem',
                                        }}
                                    >
                                        1.18.0
                                    </span>
                                    <span
                                        className="badge bg-info ms-2"
                                        style={{
                                            fontSize: '0.8rem',
                                        }}
                                    >
                                        4.0.0 (client)
                                    </span>
                                </h1>
                            </Col>
                            <Col className="d-grid">
                                <div
                                    className="btn-group p-2"
                                    role="group"
                                    aria-label="Basic example"
                                >
                                    <button
                                        type="button"
                                        className={
                                            'btn ' +
                                            (client.controller?.apiAccess
                                                ? 'btn-success'
                                                : 'btn-danger')
                                        }
                                        onClick={() => {
                                            if (client.controller?.apiAccess)
                                                window.open(
                                                    (isProduction()
                                                        ? client.controller
                                                              .config?.api
                                                              ?.production
                                                        : client.controller
                                                              .config.api
                                                              ?.developer) ||
                                                        'http://localhost:1337'
                                                );
                                        }}
                                    >
                                        API
                                    </button>
                                    <button
                                        type="button"
                                        className={
                                            'btn ' +
                                            (client.controller?.apiAccess
                                                ? 'btn-success'
                                                : 'btn-danger')
                                        }
                                        onClick={() => {
                                            if (client.controller?.apiAccess)
                                                window.open(
                                                    (isProduction()
                                                        ? client.controller
                                                              .config?.api
                                                              ?.production
                                                        : client.controller
                                                              .config.api
                                                              ?.developer) ||
                                                        'http://localhost:1337'
                                                );
                                        }}
                                    >
                                        Web Socket
                                    </button>
                                    <button
                                        type="button"
                                        className={
                                            'btn ' +
                                            (client.controller?.networkAccess
                                                ? 'btn-success'
                                                : 'btn-danger')
                                        }
                                    >
                                        Network Access
                                    </button>
                                    <button
                                        type="button"
                                        className={
                                            'btn ' +
                                            (client.controller?.web3Access
                                                ? 'btn-success'
                                                : 'btn-danger')
                                        }
                                    >
                                        Wallet Access
                                    </button>
                                    <button
                                        type="button"
                                        className={
                                            'btn ' +
                                            (client.admin
                                                ? 'btn-success'
                                                : 'btn-danger')
                                        }
                                    >
                                        Admin
                                    </button>
                                </div>
                            </Col>
                        </Row>
                        <Row className="bg-dark pt-2">
                            <Col className="p-0">
                                <ul
                                    className="nav nav-tabs justify-content-center gap-2"
                                    style={{
                                        borderBottom: '4px solid #fff',
                                    }}
                                    id="navbar"
                                >
                                    {Object.keys(Pages).map((key, index) => {
                                        return (
                                            <li
                                                className="nav-item"
                                                key={index}
                                            >
                                                <b
                                                    className={
                                                        'nav-link fs-5 ' +
                                                        (key === selectedTab
                                                            ? 'active'
                                                            : '')
                                                    }
                                                    style={{
                                                        fontWeight: 'bolder',
                                                    }}
                                                    onClick={() => {
                                                        selectTab(key as any);
                                                    }}
                                                >
                                                    {key}
                                                </b>
                                            </li>
                                        );
                                    })}
                                </ul>
                            </Col>
                        </Row>
                    </Container>
                    <Container fluid>
                        <Row
                            style={{
                                minHeight: '100vh',
                            }}
                            className="p-0 m-0"
                        >
                            <Col lg={3} className=" m-0 p-3">
                                <Row>
                                    <Col>
                                        <Alert
                                            variant="info"
                                            className="text-center"
                                        >
                                            <b>
                                                Welcome to the InfinityMint
                                                Admin Dashboard!
                                            </b>
                                            <hr />
                                            You can click on a project to select
                                            it. You can load more projects by
                                            using the button below.
                                            <hr />
                                            <small>
                                                You can press <u>Control-Q</u>{' '}
                                                to hide/show this dashboard.
                                            </small>
                                        </Alert>
                                        <ListGroup className="mb-3">
                                            {Object.keys(client.projects).map(
                                                (key) => (
                                                    <ListGroup.Item
                                                        key={key}
                                                        onClick={async () => {
                                                            await client.controller.loadProject(
                                                                key
                                                            );

                                                            setSelectedProject(
                                                                client.projects[
                                                                    key
                                                                ]
                                                            );
                                                        }}
                                                        style={{
                                                            cursor: 'pointer',
                                                        }}
                                                        variant={
                                                            key.split(
                                                                '@'
                                                            )[0] ===
                                                            selectedProject.name
                                                                ? 'success'
                                                                : ''
                                                        }
                                                    >
                                                        {cutLongString(key, 32)}{' '}
                                                        <span
                                                            className="badge bg-info"
                                                            style={{
                                                                float: 'right',
                                                            }}
                                                        >
                                                            {
                                                                client.projects[
                                                                    key
                                                                ].source
                                                            }
                                                        </span>
                                                    </ListGroup.Item>
                                                )
                                            )}
                                        </ListGroup>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col>
                                        <Card body>
                                            <div className="d-grid gap-2">
                                                <button
                                                    type="button"
                                                    className="btn btn-secondary"
                                                    onClick={onHide}
                                                >
                                                    Help
                                                </button>
                                                <button
                                                    type="button"
                                                    className="btn btn-secondary"
                                                    onClick={onHide}
                                                >
                                                    Load Project
                                                </button>
                                                <button
                                                    type="button"
                                                    className="btn btn-secondary"
                                                    onClick={onHide}
                                                >
                                                    Notifications{' '}
                                                    <span className="badge bg-danger">
                                                        0
                                                    </span>
                                                </button>
                                                <hr />
                                                <button
                                                    type="button"
                                                    className="btn btn-info"
                                                    onClick={() => {
                                                        client?.controller?.reset();
                                                        onHide();
                                                    }}
                                                >
                                                    Refresh Dashboard
                                                </button>
                                                <button
                                                    type="button"
                                                    className="btn btn-warning"
                                                    onClick={onHide}
                                                >
                                                    Close Dashboard
                                                </button>
                                            </div>
                                        </Card>
                                    </Col>
                                </Row>
                                <hr />
                                <Row>
                                    <Col>
                                        <Card body>
                                            <ListGroup>
                                                <ListGroup.Item className="text-center">
                                                    <span className="badge bg-secondary">
                                                        {client?.controller?.getCurrentAddress()}
                                                    </span>
                                                    <hr />

                                                    {client?.controller
                                                        ?.currentNetwork
                                                        ?.name ||
                                                        'Unknown Network'}
                                                    <br />
                                                    <span className="badge bg-secondary text-center mb-2">
                                                        {client?.controller
                                                            ?.currentNetwork
                                                            ?.url ||
                                                            'Unkown Network URL'}
                                                    </span>
                                                </ListGroup.Item>
                                                <ListGroup.Item>
                                                    Default Network{' '}
                                                    <span
                                                        className="badge bg-secondary"
                                                        style={{
                                                            float: 'right',
                                                        }}
                                                    >
                                                        {
                                                            client?.controller
                                                                ?.defaultNetwork
                                                        }
                                                    </span>
                                                </ListGroup.Item>
                                                <ListGroup.Item>
                                                    Default Project{' '}
                                                    <span
                                                        className="badge bg-secondary"
                                                        style={{
                                                            float: 'right',
                                                        }}
                                                    >
                                                        {
                                                            client?.controller
                                                                ?.defaultProject
                                                                ?.projectFullName
                                                        }
                                                    </span>
                                                </ListGroup.Item>
                                            </ListGroup>
                                        </Card>
                                    </Col>
                                </Row>
                            </Col>
                            <Col className="bg-white m-0 pt-3 border">
                                {Component && client.loaded ? (
                                    <>{Component}</>
                                ) : (
                                    <>
                                        <Alert
                                            variant="danger"
                                            className="mt-2"
                                        >
                                            <Alert.Heading>
                                                Component not found
                                            </Alert.Heading>
                                            <p>
                                                The component {selectedTab} was
                                                not found.
                                            </p>
                                        </Alert>
                                    </>
                                )}
                            </Col>
                        </Row>
                        <Row
                            className="bg-dark"
                            style={{
                                bottom: 0,
                            }}
                        >
                            <Col className="text-white p-5 text-center" sm={4}>
                                <img
                                    src="https://magicmirror.one/img/0x0zLogo.jpg"
                                    className="img-fluid mx-auto"
                                    width="50%"
                                    alt="logo"
                                />
                                <p className="mt-2 fs-5">0x0zAgency</p>
                            </Col>
                            <Col sm={8} className="text-white d-flex">
                                <p className="fs-4 pt-4">
                                    <br />
                                    <span
                                        style={{
                                            fontSize: '75%',
                                        }}
                                    >
                                        This software is a work in progress!
                                    </span>{' '}
                                    <br />
                                    <hr />
                                    <a
                                        style={{
                                            fontSize: '75%',
                                            color: 'cyan',
                                            cursor: 'pointer',
                                            textDecoration: 'underline',
                                        }}
                                        href="#navbar"
                                    >
                                        Top Of Page
                                    </a>
                                    <br />
                                    <a
                                        style={{
                                            fontSize: '75%',
                                            color: 'cyan',
                                            cursor: 'pointer',
                                            textDecoration: 'underline',
                                        }}
                                        href="https://github.com/0x0zAgency"
                                        onClick={(e) => {
                                            e.preventDefault();
                                            window.open(
                                                'https://github.com/0x0zAgency'
                                            );
                                        }}
                                    >
                                        Github Org
                                    </a>
                                    <br />
                                    <a
                                        style={{
                                            fontSize: '75%',
                                            color: 'cyan',
                                            cursor: 'pointer',
                                            textDecoration: 'underline',
                                        }}
                                        href="https://docs.infinitymint.app"
                                        onClick={(e) => {
                                            e.preventDefault();
                                            window.open(
                                                'https://docs.infinitymint.app'
                                            );
                                        }}
                                    >
                                        Documentation (InfinityConsole)
                                    </a>
                                    <br />
                                    <a
                                        style={{
                                            fontSize: '75%',
                                            color: 'cyan',
                                            cursor: 'pointer',
                                            textDecoration: 'underline',
                                        }}
                                        href="https://0x0zagency.github.io/infinitymint-client/"
                                        onClick={(e) => {
                                            e.preventDefault();
                                            window.open(
                                                'https://0x0zagency.github.io/infinitymint-client/'
                                            );
                                        }}
                                    >
                                        Documentation (Client)
                                    </a>
                                </p>
                            </Col>
                        </Row>
                    </Container>
                </>
            ) : null}
        </>
    );
}

export default Dashboard;