import {useState} from "react";

import MongoCollectionSocket from "./api/socket/MongoCollectionSocket";
import {useCursor} from "./api/socket/useCursor";


/**
 * Test1
 *
 * @param root0
 * @param root0.collectionName
 * @return
 */
const Results1 = ({collectionName = "compression-jobs"}: {collectionName?: string}) => {
    const singleResult = useCursor(
        () => new MongoCollectionSocket(collectionName).find({}, {}),
        [collectionName]
    );

    return (
        <div>
            {singleResult.map((r, index) => (
                <div key={index}>
                    {JSON.stringify(r)}
                </div>
            ))}
        </div>
    );
};

/**
 * Test2
 *
 * @param root0
 * @param root0.collectionName
 * @param root0.limit
 * @return
 */
const Results2 = ({collectionName = "stats", limit = 5}: {collectionName?: string; limit?: number}) => {
    const singleResult = useCursor(
        () => new MongoCollectionSocket(collectionName).find({}, {limit}),
        [collectionName,
            limit]
    );

    return (
        <div>
            {singleResult.map((r, index) => (
                <div key={index}>
                    {JSON.stringify(r)}
                </div>
            ))}
        </div>
    );
};

/**
 *
 */
const App = () => {
    const [show, setShow] = useState(true);
    const [collection1, setCollection1] = useState("compression-jobs");
    const [limit, setLimit] = useState(5);

    const toggleCollection = () => {
        setCollection1("compression-jobs" === collection1 ?
            "stats" :
            "compression-jobs");
    };

    const toggleLimit = () => {
        setLimit(5 === limit ?
            1 :
            5);
    };

    return (
        <div>
            <div>
                <button
                    onClick={() => {
                        setShow(!show);
                    }}
                >
                    Toggle
                </button>
                <button onClick={toggleCollection}>
                    Switch Collection:
                    {" "}
                    {collection1}
                </button>
                {show && <Results1 collectionName={collection1}/>}
            </div>

            <p>------------------------</p>

            <div>
                <button
                    onClick={() => {
                        setShow(!show);
                    }}
                >
                    Toggle
                </button>
                <button onClick={toggleLimit}>
                    Set Limit:
                    {" "}
                    {limit}
                </button>
                {show && <Results2
                    collectionName={"stats"}
                    limit={limit}/>}
            </div>

            <p>------------------------</p>
        </div>
    );
};

export default App;