import {createSignal, onMount} from "solid-js";
import { customElement } from "solid-element";
import {awService} from "../services/aw-service";
import {Attribute, Collection, CollectionsList} from "./types";

const style = ``;

const defaultProps = {
    awEndpoint: "localhost:80/v1",
    awProject: "",
    styles: "",
};

customElement("collections-list", defaultProps, (props) => {
    const [collections, setCollections] = createSignal<CollectionsList>();
    awService.init(props.awEndpoint, props.awProject);

    let customStyles;
    try {
        customStyles = props.styles;
    } catch(e) {
        customStyles = '';
    }

    onMount(async () => {
        awService.getCollections().subscribe((collection: CollectionsList) => {
            setCollections(collection);
        });
    });

    return (
        <div class={'collections-frame'}>
            <style>{style}</style>
            <style>{customStyles}</style>
            {/*<span>{JSON.stringify(collections(), null, "  ")}</span>*/}
            {collections()?.collections.map((col: Collection) => {
                return <div>
                    <h3>{col.name}</h3>
                    <span>{col.$id}</span><br></br>
                    {
                        col.attributes.map((attr: Attribute) => {
                            return <div>
                                <span>{attr.key + ", " + attr.type}</span>
                            </div>;
                        })
                    }
                </div>;
            })}
        </div>
    );
});