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

type ItemHistoryTableProps = {
    itemId: number
}

const ItemHistoryTableStyle = styled.table`
    width: 100%
        `
const ItemHistoryTableHead = styled.thead`
    background-color: #34067eff
`
const ItemHistoryTableItem = styled.td`
    align: center
`

const ItemHistoryTH = styled.th`
    align: center
`

const ItemHistoryTableBody = styled.tbody`
    > :nth-child(even) {
        background-color: #410041ff;
    }
    > :hover {
        background-color: #707070ff;
    }
`

const ItemHistoryTableRow = styled.tr`

`

const itemHistoryMutex = new Mutex()

export const ItemHistoryTable = ({itemId}: ItemHistoryTableProps) => {
    const itemStore = useItemStore((state) => state)

    useAsyncEffect(async () => {
        if(itemStore.itemHistories.filter((ih) => parseInt(ih.ItemId) === itemId).length === 0) {
            const release = await itemHistoryMutex.acquire()
            await itemStore.getItemHistory(itemId)
            await release()
        }
    }, [itemStore.itemHistories])

    return (
        <ItemHistoryTableStyle>
            <ItemHistoryTableHead>
                <tr>
                    <ItemHistoryTH>
                        item
                    </ItemHistoryTH>
                    <ItemHistoryTH>
                        price
                    </ItemHistoryTH>
                    <ItemHistoryTH>
                        valid from
                    </ItemHistoryTH>
                    <ItemHistoryTH>
                        valid to
                    </ItemHistoryTH>
                </tr>
            </ItemHistoryTableHead>
            <ItemHistoryTableBody>
                {itemStore.itemHistories.filter((ih) => parseInt(ih.ItemId) === itemId).map((iph) => (
                    <ItemHistoryTableRow key = {iph.ItemId + new Date(iph.ValidFrom).getMilliseconds()}>
                        <ItemHistoryTableItem>
                            {iph.ItemName}
                        </ItemHistoryTableItem>
                        <ItemHistoryTableItem>
                            {Math.trunc(parseInt(iph.ItemPrice) * 100) / 100}
                        </ItemHistoryTableItem>
                        <ItemHistoryTableItem>
                            {new Date(iph.ValidFrom).toLocaleDateString()}
                        </ItemHistoryTableItem>
                        <ItemHistoryTableItem>
                            {new Date(iph.ValidTo).toLocaleDateString()}
                        </ItemHistoryTableItem>
                    </ItemHistoryTableRow>
                ))}
            </ItemHistoryTableBody>
        </ItemHistoryTableStyle>
    )
}