// @ts-check
/// <reference path="./types.d.ts"/>

import { h, html, render } from "https://esm.sh/htm/preact";
import { createContext, Fragment } from 'https://esm.sh/preact';
import { useReducer, useState, useEffect, useLayoutEffect, useMemo, useRef } from 'https://esm.sh/preact/hooks';

/** @type {(props:{channel:string, interval:number})=>any} */
const App = props =>
{
    /** @type {Boxcast.StateBinding<Array<Boxcast.Broadcast>>} */
    const [ListGet, ListSet] = useState([]);

    /** @type {Boxcast.StateBinding<string>} */
    const [SelectedGet, SelectedSet] = useState("");

    /** @type {Boxcast.StateBinding<string>} */
    const [LiveGet, LiveSet] = useState("");

    /** @type {(item:Boxcast.Broadcast)=>boolean} */
    const Iterator = (item) => item.timeframe == "current" || item.timeframe == "preroll";


    useEffect(()=>
    {
        /** @type {()=>Promise} */
        const Ping = async () =>
        {
            const response = await fetch(`https://rest.boxcast.com/channels/${props.channel}/broadcasts?l=50`);
            /** @type {Array<Boxcast.Broadcast>} */
            const json = await response.json();
            json.sort((a, b) => a.starts_at > b.starts_at ? 1 : -1);
            ListSet(json);
        };

        Ping();
        const timer = setInterval(Ping, props.interval);
        return ()=>clearInterval(timer);
    }
    , []);

    useEffect(()=>
    {
        let live = "";
        for(let i=0; i<ListGet.length; i++)
        {
            if(ListGet[i].timeframe != "past")
            {
                live = ListGet[i].id;
                break;
            }
        }
        if(SelectedGet != live)
        {
            
        }
        LiveSet(live);
    }
    , [ListGet]);

    useEffect(()=>
    {
        // alert("New session is starting.")
    }
    , [LiveGet]);

    return html`
    <div class="Playlist">
    ${
        ListGet.map(item => html`<${BroadcastItem} item=${item} active=${item.id == SelectedGet} select=${()=>SelectedSet(item.id)} />`)
    }
    </div>
    `;
}

/** @type {(props:{item:Boxcast.Broadcast, active:boolean, select:()=>void})=>any} */
const BroadcastItem = ({item, active, select}) =>
{
    const startDate = useMemo(()=>DateParse(item.starts_at), [item.starts_at]);

    return html`
    <div key=${item.id} onClick=${select}>
        <span>${startDate.Month} ${startDate.Date}</span>
        <strong>${item.name}</strong>
        <span>${startDate.Hours}:${startDate.Minutes} ${startDate.M}</span>
        ${
            active ? html`<dd>Active</dd>` : null
        }
        <p>${item.id}</p>
    </div>
    `;
};


/** @type {(inDate:string)=>Boxcast.Date} */
const DateParse = (inDateString) =>
{
    let date = new Date(inDateString);
    /** @type {Boxcast.Date} */
    let obj = {
        Zone: date.toString().match(/\(([A-Za-z\s].*)\)/),
        Day: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][date.getDay()],
        Month: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][date.getMonth()],
        Date: date.getDate(),
        Hours: date.getHours(),
        Minutes: date.getMinutes(),
    };

    obj.Zone = obj.Zone ? obj.Zone[1] : "local time";
    obj.M = obj.Hours >= 12 ? "PM" : "AM";
    obj.Hours %= 12;
    if(obj.Hours == 0){ obj.Hours = 12; }
    if(obj.Minutes < 10){ obj.Minutes = "0"+obj.Minutes; }
    return obj;
};

export default App;