import * as React from 'react'
import type { LogLine } from '@lastres/log-line'

export interface LogPanelProps {
    logLines: LogLine[] | null
}

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

export default function LogPanel (props: LogPanelProps): JSX.Element {
    const logLines = props.logLines
    function generateLog (): React.ReactNode {
        if (logLines === null || logLines.length < 1) {
            return (
                <>No log</>
            )
        }
        return logLines.sort(function (a: LogLine, b: LogLine): number {
            const aDate = Date.parse(a.date)
            const bDate = Date.parse(b.date)
            return aDate - bDate
        }).map((item, i) => {
            return <span key={i}>
                <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/>
            </span>
        })
    }

    return (
        <code><pre>
            {
                generateLog()
            }
        </pre></code>
    )
}