// @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<Boxcast.Broadcast>} */
    const Selected = useState(false);

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

    /** @type {()=>Promise} */
    const Ping = async () =>
    {
        const response = await fetch(`https://rest.boxcast.com/channels/${props.channel}/broadcasts?s=starts_at&l=1000`);
        const json = await response.json();
        ListSet(json);
    };

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

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

    return html`
    <div key=${item.id} onClick=${()=>active[1](item)}>
        <span>${startDate.Month} ${startDate.Date}</span>
        <strong>${item.name}</strong>
        <span>${startDate.Hours}:${startDate.Minutes} ${startDate.M}</span>
        ${
            active[0]?.id == item.id ? html`<dd>Active</dd>` : null
        }
    </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;