'use client'
import { Mutex } from "async-mutex"
import { useRef, useState } from "react"
import styled from "styled-components"
import useAsyncEffect from "use-async-effect"
import { useShallow } from "zustand/shallow"
import { useCurrentAuthenticatedUserStore } from "../providers"
import { useUserStore } from "../providers/UsersProvider"

type UserTableProps = {
    page: number
}
const UserTableStyle = styled.table`
    width: 100%
        `
const UserTableHead = styled.thead`
    background-color: #34067eff
`

const UserTH = styled.th`
    align: center
`
const UserTableItem = styled.td`
    align: center
`

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

const UserTableRow = styled.tr`

`

const userTableMutex = new Mutex()

export const UserTable = ({page}: UserTableProps) => {
    
    const userStore = useUserStore(useShallow((state) => ({
        ...state
    })))
    console.log(page)

    const [callLock, setCallLock] = useState<boolean>(false)
    const authUserStore = useCurrentAuthenticatedUserStore(useShallow((state) => state))
    console.log(authUserStore)
    const callLockRef = useRef(callLock)
    useAsyncEffect(async () => {
        if(!callLockRef.current && authUserStore.Admin) {
            callLockRef.current = true
            setCallLock(true)
            await userStore.sync(page)
            callLockRef.current = false
            setCallLock(false)
        }
    }, [page, authUserStore.Id, authUserStore.Name])

    useAsyncEffect(async () => {
        if(authUserStore.Id === -1) {
            const release = await userTableMutex.acquire()
            await authUserStore.sync()
            console.log(authUserStore)
            await release()
        }
    }, [authUserStore.Id])
    console.log(userStore.tableUsers)
    return authUserStore.Admin && (
        <UserTableStyle>
            <UserTableHead>
                <tr>
                    <UserTH>id</UserTH>
                    <UserTH>name</UserTH>
                    <UserTH>position</UserTH>
                    <UserTH>active</UserTH>
                    <UserTH>admin</UserTH>
                </tr>
            </UserTableHead>
            <UserTableBody>
            {userStore.tableUsers.map((u) => (
                <UserTableRow key={u.Id}>
                    <UserTableItem>{u.Id}</UserTableItem> 
                    <UserTableItem>{u.Name}</UserTableItem> 
                    <UserTableItem>{u.JobPosition}</UserTableItem> 
                    <UserTableItem><input type="checkbox" onChange={async () => {
                        if(u.Active)
                            await userStore.deactivateUser(u.Id)
                        else
                            await userStore.activateUser(u.Id)
                    }} checked={u.Active}/></UserTableItem> 
                    <UserTableItem><input type="checkbox" onChange={async () => {
                        if(u.Admin)
                            await userStore.demoteUser(u.Id)
                        else
                            await userStore.promoteUser(u.Id)
                    }} checked={u.Admin}/></UserTableItem> 
                </UserTableRow>))}
            </UserTableBody>
        </UserTableStyle>
    )
}