import { InfinityMintProjectPath } from 'infinitymint/dist/app/interfaces';
import React, { useContext, useEffect, useState } from 'react';
import {
    Alert,
    Button,
    Card,
    Col,
    Container,
    ListGroup,
    Row,
    Toast,
} from 'react-bootstrap';
import { Project } from '../../../core/project';
import { ClientContext } from '../../../contexts/clientProvider';
import Loading from '../../bootstrap/Loading';
import PathImage from '../../bootstrap/PathImage';

export default function View({
    selectTab,
    path,
    project,
}: {
    path?: InfinityMintProjectPath;
    project?: Project;
    selectTab: (tab: string, props?: any) => void;
}) {
    const [currentPath, setCurrentPath] =
        useState<InfinityMintProjectPath>(null);
    const [loaded, setLoaded] = useState(false);
    const client = useContext(ClientContext);

    useEffect(() => {
        if (!client.loaded) return;
        if (!path) return;
        let newProject = project || client.project;
        if (!newProject) return;
        setCurrentPath(path);
        setLoaded(true);
    }, [project, path, client]);

    let nextPath = project.deployedProject?.paths?.[path.pathId + 1];
    let prevPath = project.deployedProject?.paths?.[path.pathId - 1];
    return (
        <Container fluid>
            {!loaded ? (
                <Loading />
            ) : (
                <>
                    <Row className="mt-3">
                        <Col>
                            {prevPath ? (
                                <Card body>
                                    <Row>
                                        <Col lg={4}>
                                            <PathImage
                                                project={project}
                                                path={prevPath}
                                                maxHeight={172}
                                            />
                                        </Col>
                                        <Col>
                                            <Card body>
                                                <p className="fs-5">
                                                    {prevPath.name}
                                                </p>
                                                <hr />
                                                <small>
                                                    <span className="badge bg-secondary">
                                                        PathId{' '}
                                                        <b>{prevPath.pathId}</b>
                                                    </span>
                                                    <span className="badge bg-info ms-2">
                                                        Rarity{' '}
                                                        <b>
                                                            {prevPath?.rarity ||
                                                                (
                                                                    (project
                                                                        ?.deployedProject
                                                                        ?.paths
                                                                        ?.length ||
                                                                        1) / 100
                                                                ).toFixed(2)}
                                                            %
                                                        </b>
                                                    </span>
                                                </small>
                                            </Card>
                                            <div className="d-grid mt-2">
                                                <Button
                                                    variant="secondary"
                                                    onClick={() => {
                                                        selectTab('ViewPath', {
                                                            path: prevPath,
                                                            project,
                                                        });
                                                    }}
                                                >
                                                    View Path {prevPath.pathId}
                                                </Button>
                                            </div>
                                        </Col>
                                    </Row>
                                </Card>
                            ) : null}
                        </Col>
                        <Col>
                            {nextPath ? (
                                <Card body>
                                    <Row>
                                        <Col lg={4}>
                                            <PathImage
                                                project={project}
                                                path={nextPath}
                                                maxHeight={172}
                                            />
                                        </Col>
                                        <Col>
                                            <Card body>
                                                <p className="fs-5">
                                                    {nextPath.name}
                                                </p>
                                                <hr />
                                                <small>
                                                    <span className="badge bg-secondary">
                                                        PathId{' '}
                                                        <b>{nextPath.pathId}</b>
                                                    </span>
                                                    <span className="badge bg-info ms-2">
                                                        Rarity{' '}
                                                        <b>
                                                            {nextPath?.rarity ||
                                                                (
                                                                    (project
                                                                        ?.deployedProject
                                                                        ?.paths
                                                                        ?.length ||
                                                                        1) / 100
                                                                ).toFixed(2)}
                                                            %
                                                        </b>
                                                    </span>
                                                </small>
                                            </Card>
                                            <div className="d-grid mt-2">
                                                <Button
                                                    variant="secondary"
                                                    onClick={() => {
                                                        selectTab('ViewPath', {
                                                            path: nextPath,
                                                            project,
                                                        });
                                                    }}
                                                >
                                                    View Path {nextPath.pathId}
                                                </Button>
                                            </div>
                                        </Col>
                                    </Row>
                                </Card>
                            ) : null}
                        </Col>
                    </Row>
                    <Row>
                        <Col className="m-3 border-bottom">
                            <h2>
                                Overview{' '}
                                <span
                                    className="badge bg-success"
                                    style={{
                                        float: 'right',
                                        cursor: 'pointer',
                                    }}
                                >
                                    New Path ➕
                                </span>
                                <span
                                    className="badge bg-danger me-2"
                                    style={{
                                        float: 'right',
                                        cursor: 'pointer',
                                    }}
                                >
                                    Disable Path ➖
                                </span>
                            </h2>
                        </Col>
                    </Row>
                    <Row>
                        <Col lg={5}>
                            <Row className="mb-2 bg-light row-cols-1 p-2 ms-2 border">
                                <Col className="pt-1">
                                    <h4 className="border-bottom pb-2">
                                        {currentPath.name}{' '}
                                        <span
                                            className="badge bg-secondary"
                                            style={{
                                                float: 'right',
                                            }}
                                        >
                                            PathId {currentPath.pathId}
                                        </span>
                                    </h4>
                                    <p className="text-center mt-3">
                                        <small>
                                            {currentPath.description ||
                                                'No description...'}
                                        </small>
                                    </p>
                                </Col>
                                <Col className="pb-2">
                                    <PathImage
                                        path={path}
                                        project={project}
                                        maxHeight={428}
                                    />
                                </Col>
                            </Row>
                        </Col>
                        <Col>
                            <Card body>
                                <small>
                                    <span className="badge bg-secondary mb-2">
                                        Path Information
                                    </span>
                                </small>
                                <ListGroup>
                                    <ListGroup.Item>
                                        <span className="badge bg-info">
                                            name
                                        </span>{' '}
                                        {path.name}
                                    </ListGroup.Item>
                                    <ListGroup.Item>
                                        <span className="badge bg-info">
                                            pathId
                                        </span>{' '}
                                        {path.pathId}
                                    </ListGroup.Item>
                                    <ListGroup.Item>
                                        <span className="badge bg-info">
                                            filename
                                        </span>{' '}
                                        {path.fileName.toString()}
                                    </ListGroup.Item>
                                    <ListGroup.Item>
                                        <span className="badge bg-info">
                                            rarity
                                        </span>{' '}
                                        {path.rarity}%
                                    </ListGroup.Item>
                                    <ListGroup.Item>
                                        <span className="badge bg-info">
                                            checksum
                                        </span>{' '}
                                        {path.checksum}
                                    </ListGroup.Item>
                                    <ListGroup.Item>
                                        <span className="badge bg-info">
                                            extension
                                        </span>{' '}
                                        {path.source?.extension?.split(
                                            '.'
                                        )?.[1] || 'unknown'}
                                    </ListGroup.Item>
                                </ListGroup>
                            </Card>
                            <Card body className="mt-2">
                                <small>
                                    {' '}
                                    <span className="badge bg-secondary mb-2">
                                        Export Locations
                                    </span>
                                </small>
                                <ListGroup>
                                    <ListGroup.Item>
                                        <span className="badge bg-info">
                                            ipfs
                                        </span>{' '}
                                        {path.export.external?.ipfs !==
                                        undefined
                                            ? 'yes'
                                            : 'no'}
                                    </ListGroup.Item>
                                    <ListGroup.Item>
                                        <span className="badge bg-info">
                                            web2
                                        </span>{' '}
                                        {path.export.external?.web2 !==
                                        undefined
                                            ? 'yes'
                                            : 'no'}
                                    </ListGroup.Item>
                                    <ListGroup.Item>
                                        <span className="badge bg-info">
                                            public
                                        </span>{' '}
                                        {path.export.exported !== undefined
                                            ? 'yes'
                                            : 'no'}
                                    </ListGroup.Item>
                                    <ListGroup.Item>
                                        <span className="badge bg-info">
                                            api
                                        </span>{' '}
                                        {client.controller?.apiAccess
                                            ? 'yes'
                                            : 'no'}
                                    </ListGroup.Item>
                                </ListGroup>
                            </Card>
                        </Col>
                    </Row>
                    <Row>
                        <Col className="m-3 border-bottom">
                            <h2>
                                Content{' '}
                                <span
                                    className="badge bg-success"
                                    style={{
                                        float: 'right',
                                        cursor: 'pointer',
                                    }}
                                >
                                    New Content ➕
                                </span>
                            </h2>
                        </Col>
                    </Row>
                    <Row>
                        {Object.values(path.content).length === 0 ? (
                            <Col>
                                <Alert variant="warning">
                                    No Content Available In Path
                                </Alert>
                            </Col>
                        ) : (
                            <Col>
                                <Row className="row-cols-3 gy-2">
                                    {Object.values(path.content).map(
                                        (content) => {
                                            return (
                                                <Col>
                                                    <Card body>
                                                        <p className="fs-5">
                                                            {content.name}
                                                        </p>
                                                    </Card>
                                                </Col>
                                            );
                                        }
                                    )}
                                </Row>
                            </Col>
                        )}
                    </Row>
                    <Row className="mt-4">
                        <Col>
                            <Card body>
                                <div className="d-grid gap-2">
                                    <Button
                                        variant="secondary"
                                        onClick={() => {
                                            selectTab('Project', {
                                                project: project,
                                                defaultSelectedComponent:
                                                    'Preview',
                                                defaultComponentProps: {
                                                    defaultPathId: path.pathId,
                                                },
                                            });
                                        }}
                                    >
                                        Preview Path
                                    </Button>
                                    <Button
                                        variant="secondary"
                                        onClick={() => {
                                            selectTab('Project', {
                                                project: project,
                                            });
                                        }}
                                    >
                                        Back
                                    </Button>
                                </div>
                            </Card>
                        </Col>
                    </Row>
                    <br />
                </>
            )}
        </Container>
    );
}