import { Row, Col, Card, Button } from 'react-bootstrap';
import { Project } from '../../../core/project';
import { useState } from 'react';
import Contract from '../Contract';
import { InfinityMintDeploymentLive } from 'infinitymint/dist/app/interfaces';

export default function Contracts({
    project = {
        deployedProject: {},
    } as any,
    selectComponent,
    selectTab,
    defaultContract = null,
}: {
    project: Project;
    selectComponent: (component: string) => void;
    selectTab: (tab: string, props?: any) => void;
    defaultContract: InfinityMintDeploymentLive;
}) {
    const [selectedContract, setSelectedContract] =
        useState<InfinityMintDeploymentLive>(defaultContract);

    let deployments = Object.values(project.deployedProject.deployments);
    //filter duplicate contracts
    let contracts = deployments.filter(
        (contract, index, self) =>
            index ===
            self.findIndex((t) => t.contractName === contract.contractName)
    );

    return (
        <>
            {!selectedContract ? (
                <>
                    <Row>
                        <Col className="m-3 border-bottom">
                            <h2>Smart Contracts</h2>
                            <p>
                                Here are all the smart contracts that are part
                                of this project.
                            </p>
                        </Col>
                    </Row>
                    <Row className="gy-4 row-cols-2">
                        {Object.values(contracts).map((contract) => {
                            return (
                                <Col>
                                    <Card>
                                        <Card.Body>
                                            <Card.Title>
                                                {contract.contractName}{' '}
                                                <span className="badge bg-primary">
                                                    {contract.network.name}
                                                </span>{' '}
                                                <span className="badge bg-primary">
                                                    {contract.module}
                                                </span>
                                            </Card.Title>
                                            <Card.Text className="text-center">
                                                <small>Address</small>
                                                <br />
                                                {contract.address}
                                                <hr />
                                                <small>Deployer</small>
                                                <br />
                                                {contract.deployer}
                                                <hr />
                                            </Card.Text>
                                            <div className="d-grid mt-2 gap-2">
                                                <Button
                                                    variant="secondary"
                                                    onClick={() => {
                                                        setSelectedContract(
                                                            contract
                                                        );
                                                    }}
                                                >
                                                    Inspect Contract
                                                </Button>
                                            </div>
                                        </Card.Body>
                                    </Card>
                                </Col>
                            );
                        })}
                    </Row>
                </>
            ) : (
                <>
                    <Row>
                        <Col className="m-3 border-bottom">
                            <h2>{selectedContract.contractName}</h2>
                            <p>
                                Deployed by {selectedContract.deployer} on{' '}
                                {selectedContract.network.name} network.
                            </p>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Contract
                                contract={selectedContract}
                                selectTab={selectTab}
                                selectComponent={selectComponent}
                                onBack={() => {
                                    setSelectedContract(null);
                                }}
                            />
                        </Col>
                    </Row>
                </>
            )}
            <br />
        </>
    );
}