import * as React from 'react'
import type { Location } from '@lastres/location'
import type { PJ } from '@lastres/pj'
import type { LogLine } from '@lastres/log-line'
import PJListItem from '@lastres/components/pj-list-item'
import PresentationItem from '@lastres/components/presentation-item'
import Presentation from '@lastres/components/presentation'
import LogPanel from '@lastres/components/log-panel'
import MoveToPacket from '@lastres/output-packet/move-to'

interface UpperPanelProps {
    connectedLocations: Location[] | null
    teamPJs: PJ[] | null
    currentLocation: Location | null
    logLines: LogLine[] | null
    websocket: WebSocket | null
    logPresentationRef: React.RefObject<HTMLDivElement>
}

export default function UpperPanel (props: UpperPanelProps): JSX.Element {
    const connectedLocations = props.connectedLocations
    const teamPJs = props.teamPJs
    const currentLocation = props.currentLocation
    const logLines = props.logLines
    const websocket = props.websocket
    const logPresentationRef = props.logPresentationRef
    if (!(teamPJs !== null && currentLocation !== null && connectedLocations !== null)) {
        return (
            <>
                <p>Esperando datos...</p>
            </>
        )
    }

    function onClickLocation (item: Location): void {
        const moveToPacket = new MoveToPacket(item)
        if (websocket !== null) {
            moveToPacket.send(websocket)
        }
    }

    return (
        <Presentation>
            <PresentationItem>
                {
                    teamPJs.map((item, i) => {
                        return <PJListItem key={i} pj={item}/>
                    })
                }
            </PresentationItem>
            <PresentationItem presentationItemRef={logPresentationRef}>
                <LogPanel logLines={logLines}/>
            </PresentationItem>
            <PresentationItem>
                <p>Estás en {currentLocation.area.name}/{currentLocation.location.name}.</p>
                <p>Puedes ir a:</p>
                <ul>
                    {
                        connectedLocations.map((item, i) => {
                            return <li key={i}>
                                <a href="#" onClick={() => {
                                    onClickLocation(item)
                                }}>{item.area.name}/{item.location.name}</a>
                            </li>
                        })
                    }
                </ul>
            </PresentationItem>
        </Presentation>
    )
}