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>
    movingTo: Location | null
    remainingFrames: number | null
}

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)
        }
    }

    function availableLocationsToMove (): JSX.Element {
        if (connectedLocations === null || connectedLocations.length === 0) {
            return (
                <>
                </>
            )
        }
        return (
            <>
                <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>
            </>
        )
    }

    function showLocationMenuHeaderText (): JSX.Element {
        if (currentLocation === null) {
            return <></>
        }
        if (props.movingTo === null) {
            return <p>Estás en <span style={{ color: 'red' }}>{currentLocation.area.name}</span>
                /
                <span style={{ color: 'green' }}>{currentLocation.location.name}</span>.
            </p>
        }
        return <p>Estás yendo a <span style={{ color: 'red' }}>{props.movingTo.area.name}</span>
            /
            <span style={{ color: 'green' }}>{props.movingTo.location.name}</span>.
        </p>
    }

    function showRemainingFrames (): JSX.Element {
        if (props.movingTo === null) {
            return <></>
        }
        if (props.remainingFrames === null) {
            return <></>
        }
        return (
            <p>Te quedan <b>{props.remainingFrames}</b> frames para terminar la acción.</p>
        )
    }

    return (
        <Presentation>
            <PresentationItem>
                {
                    teamPJs.map((item, i) => {
                        return <PJListItem key={i} pj={item}/>
                    })
                }
            </PresentationItem>
            <PresentationItem presentationItemRef={logPresentationRef}>
                <LogPanel logLines={logLines}/>
            </PresentationItem>
            <PresentationItem>
                {
                    showLocationMenuHeaderText()
                }
                {
                    showRemainingFrames()
                }
                {
                    availableLocationsToMove()
                }
            </PresentationItem>
        </Presentation>
    )
}