import { Row, Col, ListGroup, Alert, Card, Button } from 'react-bootstrap';
import { Project } from '../../../core/project';

export default function Permissions({
    project = {
        deployedProject: {},
    } as any,
    selectComponent,
    selectTab,
}: {
    project: Project;
    selectComponent: (component: string, props?: any) => void;
    selectTab: (tab: string, props?: any) => void;
}) {
    let deployments = Object.values(project.deployedProject.deployments);
    //filter duplicate contracts
    let approvals = {};
    let contracts = deployments.filter(
        (contract, index, self) =>
            index ===
            self.findIndex((t) => t.contractName === contract.contractName)
    );

    contracts.forEach((contract) => {
        approvals[contract.contractName] = contract.approved;
    });

    return (
        <>
            <Row>
                <Col className="m-3 border-bottom">
                    <h2>Admins</h2>
                    <p>
                        These addresses have been granted admin access to your
                        project and can view and use admin features.
                    </p>
                </Col>
            </Row>
            <Row className="mb-3">
                <Col>
                    <div className="d-grid">
                        <Button variant="success">Add New Admin</Button>
                    </div>
                </Col>
            </Row>
            <Row className="row-cols-2 gy-4">
                {Object.values(
                    project.deployedProject.deployments.erc721.approved
                ).map((address) => {
                    return (
                        <Col>
                            <Card body>
                                <Alert
                                    variant="secondary"
                                    className="text-center"
                                >
                                    {address}
                                </Alert>
                                <div className="d-grid">
                                    <Button variant="warning">
                                        Revoke Admin Access
                                    </Button>
                                </div>
                            </Card>
                        </Col>
                    );
                })}
            </Row>
            <Row>
                <Col className="m-3 border-bottom">
                    <h2>Project Permissions</h2>
                    <p>
                        Heres all of the approved addresses for each contract in
                        your project.
                    </p>
                </Col>
            </Row>
            <Row className="row-cols-1 gy-4">
                {Object.keys(approvals).map((contractName) => {
                    if (!approvals[contractName]) return <></>;

                    let approval = approvals[contractName];
                    return (
                        <Col>
                            <Card>
                                <Card.Header>
                                    {contractName}{' '}
                                    <span className="badge bg-success">
                                        {Object.keys(approval).length}
                                    </span>
                                </Card.Header>
                                <Card.Body>
                                    <div className="card-body">
                                        <ListGroup>
                                            {Object.keys(approval).map(
                                                (permission) => {
                                                    return (
                                                        <ListGroup.Item>
                                                            {
                                                                approval[
                                                                    permission
                                                                ]
                                                            }{' '}
                                                            <span
                                                                className="badge bg-primary"
                                                                hidden={
                                                                    !approval[
                                                                        permission
                                                                    ]
                                                                }
                                                            >
                                                                Approved
                                                            </span>
                                                        </ListGroup.Item>
                                                    );
                                                }
                                            )}
                                        </ListGroup>
                                    </div>
                                    <div className="d-grid gap-2">
                                        <Button variant="warning">
                                            Modify Permissions
                                        </Button>
                                        <Button
                                            variant="secondary"
                                            onClick={() => {
                                                selectComponent('Contracts', {
                                                    defaultContract:
                                                        project.deployedProject
                                                            .deployments[
                                                            contractName
                                                        ],
                                                });
                                            }}
                                        >
                                            Inspect Contract
                                        </Button>
                                    </div>
                                </Card.Body>
                            </Card>
                        </Col>
                    );
                })}
            </Row>
            <br />
        </>
    );
}