import * as React from 'react'

import type { TalkNPCs, TalkNPC } from '@lastres/talk-npc'
import type { StateGame } from '@lastres/components/game'

import TalkNPCComponent from '@lastres/components/talk-npc'

export interface TalkNPCsComponentProps {
    talkNPCs: TalkNPCs | null
    websocket: WebSocket | null
    setStateGame: (set: StateGame) => void
    setNPCToSayWord: (set: TalkNPC | null) => void
}
export default function TalkNPCsComponent (props: TalkNPCsComponentProps): JSX.Element {
    const npcs = props.talkNPCs
    if (npcs === null) {
        return <></>
    }
    if (Object.keys(npcs).length < 1) {
        return <>
            <p>No hay nadie para hablar ahora.</p>
        </>
    }
    return (
        <>
            <p>Disponible para hablar:</p>
            {
                Object.keys(npcs).map((identifier) => {
                    const npc = npcs[identifier]
                    return (
                        <TalkNPCComponent key={identifier}
                            npc={npc}
                            websocket={props.websocket}
                            setStateGame={props.setStateGame}
                            setNPCToSayWord={props.setNPCToSayWord}/>
                    )
                })
            }
        </>
    )
}