import { InfinityMintDeploymentLive } from 'infinitymint/dist/app/interfaces';
import React from 'react';
import {
    Button,
    Col,
    Container,
    ListGroup,
    Row,
    Card,
    Alert,
} from 'react-bootstrap';
import Editor from './path/Editor';
import CodeEditor from '../CodeEditor';

export default function Contract({
    contract,
    onBack,
    selectTab,
    selectComponent,
}: {
    contract: InfinityMintDeploymentLive;
    onBack: () => void;
    selectTab: (tab: string, props?: any) => void;
    selectComponent: (component: string, props?: any) => void;
}) {
    return (
        <Container fluid>
            <Row>
                <Col lg={4}>
                    <Card body>
                        <ListGroup>
                            <ListGroup.Item className="d-grid">
                                <Button
                                    variant="success"
                                    onClick={() => {
                                        selectComponent('Permissions', {
                                            highlightContract:
                                                contract.contractName,
                                        });
                                    }}
                                >
                                    Verify Contract
                                </Button>
                            </ListGroup.Item>

                            <ListGroup.Item className="d-grid">
                                <Button
                                    variant="warning"
                                    onClick={() => {
                                        selectComponent('Permissions', {
                                            highlightContract:
                                                contract.contractName,
                                        });
                                    }}
                                >
                                    Edit Privilages
                                </Button>
                            </ListGroup.Item>
                            <ListGroup.Item className="d-grid">
                                <Button
                                    variant="warning"
                                    onClick={() => {
                                        selectComponent('Permissions', {
                                            highlightContract:
                                                contract.contractName,
                                        });
                                    }}
                                >
                                    Redeploy Contract
                                </Button>
                            </ListGroup.Item>
                            <ListGroup.Item className="d-grid">
                                <Button
                                    variant="secondary"
                                    onClick={() => {
                                        selectComponent('Permissions', {
                                            highlightContract:
                                                contract.contractName,
                                        });
                                    }}
                                >
                                    View On Etherscan
                                </Button>
                            </ListGroup.Item>
                            <ListGroup.Item className="d-grid">
                                <Button
                                    variant="secondary"
                                    onClick={() => {
                                        onBack();
                                    }}
                                >
                                    Back
                                </Button>
                            </ListGroup.Item>
                        </ListGroup>
                    </Card>
                </Col>
                <Col>
                    <Card body>
                        <ListGroup>
                            <ListGroup.Item>
                                <span className="badge bg-info">contract</span>{' '}
                                {contract.contractName}
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <span className="badge bg-info">module</span>{' '}
                                {contract.module || 'not a module contract'}
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <span className="badge bg-info">project</span>{' '}
                                {contract.project || 'unknown'}
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <span className="badge bg-info">address</span>{' '}
                                {contract.address || 'unknown'}
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <span className="badge bg-info">network</span>{' '}
                                {contract.network.name || 'unknown'}
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <span className="badge bg-info">chainId</span>{' '}
                                {contract.receipt.chainId}
                            </ListGroup.Item>
                            <ListGroup.Item>
                                <span className="badge bg-info">txHash</span>{' '}
                                <a
                                    href={
                                        'https://etherscan.io/tx/' +
                                        contract.receipt.hash
                                    }
                                >
                                    {contract.receipt.hash || 'unknown'}
                                </a>
                            </ListGroup.Item>
                        </ListGroup>
                    </Card>
                </Col>
            </Row>
            <Row>
                <Col className="m-3 border-bottom">
                    <h2>Source</h2>
                    <p>Here is the source file to your contract</p>
                </Col>
            </Row>
            <Row>
                <Col>
                    <Alert variant="warning">
                        No source code found for this contract
                    </Alert>
                </Col>
            </Row>
            <Row>
                <Col className="m-3 border-bottom">
                    <h2>ABI</h2>
                    <p>
                        This is the ABI for the contract which was compiled by
                        solc
                    </p>
                </Col>
            </Row>
            <Row>
                <Col>
                    <CodeEditor
                        style={{
                            maxHeight: '512px',
                            overflow: 'auto',
                        }}
                        initialCode={JSON.stringify(contract.abi, null, 2)}
                    />
                </Col>
            </Row>
        </Container>
    );
}