import React, { useCallback, useEffect, useState } from 'react';
import { Row, Col, Card, Button, Container } from 'react-bootstrap';
import { Project } from '../../core/project';

import Overview from './project/Overview';
import Contracts from './project/Contracts';
import Permissions from './project/Permissions';
import Receipts from './project/Receipts';
import Preview from './project/Preview';
import Loading from '../bootstrap/Loading';
import Gems from './project/Gems';

const Components = {
    Overview,
    Contracts,
    Permissions,
    Receipts,
    Preview,
    Gems,
};

function ProjectCenter({
    project = {
        deployedProject: {},
    } as any,
    selectTab,
    defaultSelectedComponent = 'Overview',
    defaultComponentProps = null,
}: {
    project: Project;
    selectTab: (tab: string, props?: any) => void;
    defaultSelectedComponent?: string;
    defaultComponentProps?: any;
}) {
    const [selectedComponent, setSelectedComponent] = useState(
        defaultSelectedComponent
    );

    const [Component, setComponent] = useState(
        React.createElement(Components[selectedComponent], {
            project,
        })
    );

    const selectComponent = useCallback(
        (componentName: string, props?: any) => {
            setSelectedComponent(componentName);
            setComponent(
                React.createElement(Components[componentName], {
                    project,
                    selectTab,
                    selectComponent,
                    ...(props || {}),
                })
            );
            window.scrollTo(0, 0);
        },
        [setSelectedComponent, selectTab, project]
    );

    useEffect(() => {
        selectComponent(defaultSelectedComponent, defaultComponentProps);
    }, [selectComponent, defaultSelectedComponent, defaultComponentProps]);

    return (
        <>
            <Container fluid className="bg-light pb-2 border">
                {!project ? (
                    <Loading />
                ) : (
                    <>
                        <Row>
                            <Col className="m-3 border-bottom">
                                <h3>
                                    {project.name}{' '}
                                    <span
                                        className="badge bg-primary ms-2"
                                        style={{
                                            float: 'right',
                                        }}
                                    >
                                        @
                                        {
                                            project.deployedProject?.version
                                                ?.version
                                        }
                                    </span>{' '}
                                    <span
                                        className="badge bg-success ms-2"
                                        style={{
                                            float: 'right',
                                        }}
                                        hidden={
                                            !project.deployedProject.compiled
                                        }
                                    >
                                        Compiled
                                    </span>{' '}
                                    <span
                                        className="badge bg-success"
                                        style={{
                                            float: 'right',
                                        }}
                                        hidden={
                                            !project.deployedProject.deployed
                                        }
                                    >
                                        Deployed
                                    </span>
                                </h3>
                                <p>
                                    {project.description ||
                                        'No description available'}
                                    <br />
                                    <small>
                                        <span className="badge bg-secondary mt-2">
                                            {
                                                project.deployedProject?.network
                                                    ?.name
                                            }
                                        </span>
                                        <span className="badge bg-secondary mt-2 ms-2">
                                            chainId{' '}
                                            {
                                                project.deployedProject?.network
                                                    ?.chainId
                                            }
                                        </span>
                                        <span className="badge bg-secondary mt-2 ms-2">
                                            deployer{' '}
                                            {project.deployedProject?.deployer}
                                        </span>
                                    </small>
                                </p>
                            </Col>
                        </Row>
                        <Row className="row-cols-1 gap-2 mb-2">
                            {Object.keys(Components).map((componentName) => {
                                return (
                                    <Col lg key={componentName}>
                                        <Card>
                                            <Card.Header className="bg-light text-black text-center">
                                                {componentName}
                                            </Card.Header>
                                            <Card.Body className="d-grid">
                                                <Button
                                                    onClick={() =>
                                                        selectComponent(
                                                            componentName
                                                        )
                                                    }
                                                    variant={
                                                        selectedComponent ===
                                                        componentName
                                                            ? 'outline-success'
                                                            : 'outline-primary'
                                                    }
                                                >
                                                    {selectedComponent ===
                                                    componentName
                                                        ? 'Selected'
                                                        : 'Select'}
                                                </Button>
                                            </Card.Body>
                                        </Card>
                                    </Col>
                                );
                            })}
                        </Row>
                    </>
                )}
            </Container>
            <Container fluid>{Component ? Component : null}</Container>
        </>
    );
}

export default ProjectCenter;