import React from 'react';
import { Row, Col, Toast, Card } from 'react-bootstrap';
import { Project } from '../../../core/project';

export default function Gas({
    project = {
        deployedProject: {},
    } as any,
}: {
    project: Project;
}) {
    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)
    );
    let receipts = contracts.map((deployment) => {
        return deployment.receipt;
    });

    return (
        <>
            <Row>
                <Col className="m-3 border-bottom">
                    <h2>Receipts</h2>
                    <p>
                        Here are all the receipts which were used when deploying
                        various contracts
                    </p>
                </Col>
            </Row>
            <Row className="gy-4 justify-content-center">
                <Col>
                    <Toast className="mx-auto">
                        <Toast.Header closeButton={false}>
                            <img
                                src="holder.js/20x20?text=%20"
                                className="rounded me-2"
                                alt=""
                            />
                            <strong className="me-auto">Total Gas </strong>
                        </Toast.Header>
                        <Toast.Body>
                            <Row>
                                <Col lg={3}>
                                    <p className="display-4">⭐</p>
                                </Col>
                                <Col>
                                    <p className="display-6">16,593,303</p>
                                </Col>
                            </Row>
                        </Toast.Body>
                    </Toast>
                </Col>
                <Col>
                    <Toast className="mx-auto">
                        <Toast.Header closeButton={false}>
                            <img
                                src="holder.js/20x20?text=%20"
                                className="rounded me-2"
                                alt=""
                            />
                            <strong className="me-auto">Gas Price</strong>
                        </Toast.Header>
                        <Toast.Body>
                            <Row>
                                <Col lg={3}>
                                    <p className="display-4">⛽</p>
                                </Col>
                                <Col>
                                    <p className="display-6">28gwei</p>
                                </Col>
                            </Row>
                        </Toast.Body>
                    </Toast>
                </Col>
                <Col>
                    <Toast className="mx-auto">
                        <Toast.Header closeButton={false}>
                            <img
                                src="holder.js/20x20?text=%20"
                                className="rounded me-2"
                                alt=""
                            />
                            <strong className="me-auto">Total Cost</strong>
                        </Toast.Header>
                        <Toast.Body>
                            <Row>
                                <Col lg={4}>
                                    <p className="display-4">💰</p>
                                </Col>
                                <Col>
                                    <p className="display-6">0.082 ETH</p>
                                </Col>
                            </Row>
                        </Toast.Body>
                    </Toast>
                </Col>
            </Row>
            <Row>
                <Col className="m-3 border-bottom">
                    <h2>Transaction History</h2>
                    <p>
                        Here's a list of all the transactions you've made with
                        this project
                    </p>
                </Col>
            </Row>
            <Row>
                <Col>
                    <Card body>
                        <table className="table">
                            <thead>
                                <tr>
                                    <th scope="col">From</th>
                                    <th scope="col">Transaction</th>
                                </tr>
                            </thead>
                            {receipts.map((receipt) => {
                                return (
                                    <tbody>
                                        <tr>
                                            <td>{receipt.from}</td>
                                            <td>
                                                <a
                                                    href={
                                                        'https://etherscan.io/tx/' +
                                                        receipt.hash
                                                    }
                                                >
                                                    {receipt.hash}
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                );
                            })}
                        </table>
                    </Card>
                </Col>
            </Row>
        </>
    );
}