import { useState } from "react";
import { db } from "../backend/db";
import { PrimitiveView } from "./PrimitiveView";
import type { Primitive } from "../types";

export const DbView = function () {
    const [selectedPrimitiveId, setSelectedPrimitiveId] = useState<string>('');

    let selectedPrimitives: Primitive[] = [];
    if (selectedPrimitiveId) {
        const primitive = db.primitiveById(selectedPrimitiveId);
        if (primitive)
            selectedPrimitives = [primitive];
    }
    else
        selectedPrimitives = db.solids;

    return (
        <div id="blob-view">
            <div>
                <input type="text" placeholder="Search..." value={selectedPrimitiveId} onChange={(e) => setSelectedPrimitiveId(e.target.value)} />
            </div>
            <div>
                {
                    selectedPrimitives.map(p => <PrimitiveView key={p.id} primitive={p} />)
                }
            </div>
        </div>
    )
}