import { Mutex } from "async-mutex"
import useAsyncEffect from "use-async-effect"
import { useItemStore } from "../providers/ItemsProvider"
import { ItemTableListRow } from "./ItemTableListRow"

const itemApiMutex = new Mutex()
export const ItemTableList = () => {
    const itemStore = useItemStore((state) => state)

    useAsyncEffect( async () => {
        if(itemStore.items.length === 0) {
            const release = await itemApiMutex.acquire()

            await itemStore.sync()

            await release()
        }
    }, [])

    return (
        <ul>
            {itemStore.items.map((i) => (
                <ItemTableListRow item={i} key={i.ItemId}/>
            ))}
        </ul>
    )
}