import React, { useState } from 'react';
import { Alert, Button, Card, Col, ListGroup, Row } from 'react-bootstrap';
import PathImage from './PathImage';
import { Dictionary } from 'infinitymint/dist/app/helpers';
import { InfinityMintProjectAsset } from 'infinitymint/dist/app/interfaces';
import { Project } from '../../core/project';

export default function Assets({
    assetSections = {},
    hidden = false,
    project = null,
    onAssetSelected = null,
    selectedAssets = [],
    children = null,
    showArrows = false,
    selectText = 'Select',
    unselectText = 'Unselect',
}: {
    assetSections?: Dictionary<InfinityMintProjectAsset[]>;
    hidden?: boolean;
    project?: Project;
    onAssetSelected?: (
        asset: InfinityMintProjectAsset,
        unselect?: boolean
    ) => Promise<void> | void;
    children?: any;
    selectedAssets?: number[];
    showArrows?: boolean;
    selectText?: string;
    unselectText?: string;
}) {
    const [selectedAssetSection, setSelectedAssetSection] = useState(null);

    let length = Object.keys(assetSections || {}).length;
    return (
        <Row hidden={hidden} className="mt-4">
            <Col lg={3}>
                <Row className="row-cols-1 gy-4 mb-2">
                    {Object.keys(assetSections).map((section, index) => (
                        <>
                            <Col>
                                <Card className="h-100">
                                    <Card body>
                                        <ListGroup variant="flush">
                                            <ListGroup.Item
                                                className="p-3"
                                                variant={
                                                    selectedAssetSection ===
                                                    section
                                                        ? 'success'
                                                        : 'secondary'
                                                }
                                            >
                                                <Row>
                                                    <Col lg={3}>
                                                        <p className="fs-6">
                                                            <span className="badge bg-secondary">
                                                                {index}
                                                            </span>
                                                        </p>
                                                    </Col>
                                                    <Col lg>
                                                        <h6
                                                            style={{
                                                                fontSize:
                                                                    '0.75rem',
                                                            }}
                                                        >
                                                            {section}{' '}
                                                            <span className="badge bg-info">
                                                                {
                                                                    assetSections[
                                                                        section
                                                                    ].length
                                                                }{' '}
                                                                Assets
                                                            </span>
                                                        </h6>
                                                    </Col>
                                                    <Col lg className="d-grid">
                                                        <Button
                                                            variant={
                                                                section ===
                                                                selectedAssetSection
                                                                    ? 'success'
                                                                    : 'secondary'
                                                            }
                                                            onClick={() => {
                                                                setSelectedAssetSection(
                                                                    section
                                                                );
                                                            }}
                                                        >
                                                            {section ===
                                                            selectedAssetSection
                                                                ? 'Select'
                                                                : 'Select'}
                                                        </Button>
                                                    </Col>
                                                </Row>
                                            </ListGroup.Item>
                                        </ListGroup>
                                    </Card>
                                </Card>
                            </Col>
                            <Col
                                className="text-center"
                                hidden={index === length - 1 || !showArrows}
                            >
                                <svg
                                    style={{
                                        position: 'absolute',
                                        marginLeft: '-16px',
                                        marginTop: '-16px',
                                    }}
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="32"
                                    height="32"
                                    fill="currentColor"
                                    className="bi bi-arrow-down"
                                    viewBox="0 0 16 16"
                                >
                                    <path
                                        fill-rule="evenodd"
                                        d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"
                                    />
                                </svg>
                            </Col>
                        </>
                    ))}
                </Row>
            </Col>
            <Col lg hidden={!selectedAssetSection}>
                <Row className="row-cols-4 gy-4">
                    {Object.keys(assetSections)
                        .filter((section) => selectedAssetSection === section)
                        .map((section) => {
                            return assetSections[section].map(
                                (asset, index) => (
                                    <Col>
                                        <Card className="h-100">
                                            <Card.Header>
                                                <h5
                                                    className="mt-2"
                                                    style={{
                                                        fontSize: '0.75rem',
                                                    }}
                                                >
                                                    {asset.name}{' '}
                                                    <span
                                                        className="badge bg-secondary"
                                                        style={{
                                                            float: 'right',
                                                        }}
                                                    >
                                                        AssetId {asset.assetId}
                                                    </span>
                                                </h5>
                                            </Card.Header>
                                            <Card.Body>
                                                <div className="card-block h-100">
                                                    <PathImage
                                                        path={asset}
                                                        project={project}
                                                    />
                                                </div>
                                            </Card.Body>
                                            {children || onAssetSelected ? (
                                                <Card.Footer>
                                                    {onAssetSelected ? (
                                                        <Button
                                                            variant={
                                                                selectedAssets.indexOf(
                                                                    asset.assetId
                                                                ) !== -1
                                                                    ? 'danger'
                                                                    : 'secondary'
                                                            }
                                                            onClick={() => {
                                                                selectedAssets.indexOf(
                                                                    asset.assetId
                                                                ) === -1
                                                                    ? onAssetSelected(
                                                                          asset
                                                                      )
                                                                    : onAssetSelected(
                                                                          asset,
                                                                          true
                                                                      );
                                                            }}
                                                        >
                                                            {selectedAssets.indexOf(
                                                                asset.assetId
                                                            ) !== -1
                                                                ? unselectText
                                                                : selectText}
                                                        </Button>
                                                    ) : null}
                                                    {children}
                                                </Card.Footer>
                                            ) : null}
                                        </Card>
                                    </Col>
                                )
                            );
                        })}
                </Row>
            </Col>
            <Col lg hidden={selectedAssetSection}>
                <p className="display-5">Select a section</p>
                <hr />
                <Alert variant="info">
                    Each section is a collection of assets which are layered to
                    create the final image. Click on a section to view the
                    assets.
                </Alert>
            </Col>
        </Row>
    );
}