import React, {useEffect, useState} from "react";
import {Card, Col} from "react-bootstrap-v5";
import ExtensionIcon from "./ExtensionIcon";
import Datapoint from "../Datapoint";
import Masonry from 'masonry-layout'
import ExtensionTable from "./ExtensionTable";

export const ExtensionCardWrapper = ({extension, children}) => {
    const [windowWidth, setWindowWidth] = useState(window.innerWidth);

    const onResize = () => {
        setWindowWidth(window.innerWidth);
    }

    useEffect(() => {
        window.addEventListener("resize", onResize);
        return () => {
            window.removeEventListener("resize", onResize);
        }
    }, [])

    const wide = extension.wide;

    const baseWidth = windowWidth < 1000 ? 6 : 4;
    const width = (wide ? 2 : 1) * baseWidth;

    return <Col lg={width} md={width} className="extension-wrapper">{children}</Col>
}

const ExtensionTab = ({tab}) => {
    return (<>
        {tab.tabInformation.elementOrder.map((type, i) => {
            switch (type) {
                case "VALUES":
                    return <ExtensionValues key={i} tab={tab}/>
                case "TABLE":
                    return <ExtensionTables key={i} tab={tab}/>
                default:
                    return ''
            }
        })}
    </>);
}

const ExtensionValue = ({data}) => {
    return (<Datapoint name={data.description.text}
                       title={data.description.description}
                       icon={[data.description.icon.familyClass, data.description.icon.iconName]}
                       color={data.description.icon.colorClass}
                       value={data.value}
    />);
}

const ExtensionValues = ({tab}) => {
    return (
        <>
            {Boolean(tab.values.length) && <Card.Body>
                {tab.values.map((data, i) => {
                        return (<ExtensionValue key={i} data={data}/>);
                    }
                )}
            </Card.Body>}
        </>
    )
}

const ExtensionTables = ({tab}) => {
    return (<>
        {tab.tableData.map((table, i) => (
            <ExtensionTable key={i} table={table}/>
        ))}
    </>);
}

const ExtensionCard = ({extension}) => {
    const [openTabIndex, setOpenTabIndex] = useState(0);

    const toggleTabIndex = index => {
        setOpenTabIndex(index);

        requestAnimationFrame(() => {
            const masonryRow = document.getElementById('extension-masonry-row');
            const masonry = Masonry.data(masonryRow);
            if (masonry) {
                masonry.layout();
            }
        });
    }

    return <Card>
        <Card.Header>
            <h6>
                <ExtensionIcon
                    icon={extension.extensionInformation.icon}/> {extension.extensionInformation.pluginName}
            </h6>
        </Card.Header>
        <ul className="nav nav-tabs tab-nav-right" role="tablist">
            {extension.onlyGenericTab ? '' :
                extension.tabs.map((tab, i) => <li key={i} role="presentation" className="nav-item col-black">
                    <button className={"nav-link col-black"
                        + (openTabIndex === i ? ' active' : '')} onClick={() => toggleTabIndex(i)}>
                        <ExtensionIcon icon={tab.tabInformation.icon}/> {tab.tabInformation.tabName}
                    </button>
                </li>)
            }
        </ul>
        {extension.tabs.map((tab, i) => openTabIndex === i ? <ExtensionTab tab={tab} key={i}/> : '')}
    </Card>
}

export default ExtensionCard