import * as React from 'react'
import type { Words, Word } from '@lastres/word'
import { StateGame } from '@lastres/components/game'
import OutputPacketTalk from '@lastres/output-packet/talk'
import type { TalkNPC } from '@lastres/talk-npc'

export interface WordSelectorProps {
    words: Words | null
    setStateGame: (set: StateGame) => void
    websocket: WebSocket | null
    NPCToSayWord: TalkNPC | null
}

export default function WordSelector (props: WordSelectorProps): JSX.Element {
    const words = props.words

    if (props.NPCToSayWord === null) {
        console.log('Error, should be a NPC to talk with, exiting this screen.')
        props.setStateGame(StateGame.MainScreen)
        return <></>
    }
    function onClickWord (word: Word): void {
        if (props.NPCToSayWord === null || props.websocket === null) {
            return
        }
        new OutputPacketTalk(props.NPCToSayWord.identifier, word.identifier).send(props.websocket)
        props.setStateGame(StateGame.MainScreen)
    }
    function printWord (word: Word): JSX.Element {
        return (
            <a key={word.identifier}
                onClick={() => {
                    onClickWord(word)
                }}
                href="#"
                className="word">
                {
                    word.name
                }
            </a>
        )
    }

    function wordList (): JSX.Element {
        if (words === null) {
            return <p>No hay palabras para poder decir aun.</p>
        }
        return (
            <div className="word-list">
                {
                    Object.keys(words).map((key) => {
                        const word = words[key]
                        return printWord(word)
                    })
                }
            </div>
        )
    }

    return (
        <div className="word-selector">
            <a href="#" className="close-button"
                onClick={() => {
                    props.setStateGame(StateGame.MainScreen)
                }}>x</a>
            <h2>Selecciona una palabra.</h2>
            {
                wordList()
            }
        </div>
    )
}