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'

interface UpperPanelProps {
    connectedLocations: Location[] | null
    teamPJs: PJ[] | null
    currentLocation: Location | null
    logLines: LogLine[] | null
}

interface Style {
    color?: string;
    background?: string;
}

export default function UpperPanel (props: UpperPanelProps): JSX.Element {
    const connectedLocations = props.connectedLocations
    const teamPJs = props.teamPJs
    const currentLocation = props.currentLocation
    const logLines = props.logLines
    if (!(teamPJs !== null && currentLocation !== null && connectedLocations !== null)) {
        return (
            <>
                <p>Esperando datos...</p>
            </>
        )
    }
    function generateLog (): React.ReactNode {
        if (logLines === null || logLines.length < 1) {
            return (
                <>No log</>
            )
        }
        return logLines.map((item, i) => {
            return <>
                <b>{item.date}</b> {
                    item.content.map((item, i) => {
                        const style: Style = {}
                        if (item.color !== undefined) {
                            style.color = item.color
                        }
                        if (item.background !== undefined) {
                            style.background = item.background
                        }
                        return <span key={i} style={style}>{item.text}</span>
                    })
                } <br/>
            </>
        })
    }
    return (
        <div className="presentation">
            <div className="presentation-item">
                {
                    teamPJs.map((item, i) => {
                        return <PJListItem key={i} pj={item}/>
                    })
                }
            </div>
            <div className="presentation-item">
                <code><pre>
                    {
                        generateLog()
                    }
                </pre></code>
            </div>
            <div className="presentation-item">
                <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="#">{item.area.name}/{item.location.name}</a>
                            </li>
                        })
                    }
                </ul>
            </div>
        </div>
    )
}
