import { createRoot } from "react-dom/client";
import React from "react";
import { StreamInfo } from "./api";

type StreamSelectCallback = (selected: string | null) => void

interface MenuProps {
    items: StreamInfo[]
    selectedItem: string | null
    selectCallback: StreamSelectCallback
}

export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
    const title = document.title
    const menuitems = () => {
        return (
            <>
                {items.map((value, idx) => {
                    if (selectedItem == value.streamKey) {
                        return <>
                            <li key={idx} className="menu-item menu-selected">
                                <a href={"#" + value} className="menu-link">{value.streamKey}</a>
                                <p className="menu-viewcount">{value.viewCount}</p>
                            </li>
                        </>
                    } else {
                        return <>
                            <li key={idx} onClick={() => {
                                selectCallback(value.streamKey)
                            }} className="menu-item">
                                <a href={"#" + value.streamKey} className="menu-link">{value.streamKey}</a>
                                <p className="menu-viewcount">{value.viewCount}</p>
                            </li>
                        </>
                    }
                })}
            </>
        )
    }
    return (
        <div id="menu">
            <aside>
                <a className="menu-heading" onClick={() => {
                    selectCallback(null)
                }} href="#">{title}</a>
                <ul className="menu-list">
                    {menuitems()}
                </ul>
            </aside>
        </div>
    )

}