'use strict';

import * as sol from "../../solight/sol.js";

import * as serv from "../services/service.js";
import * as music from "./music.js";


const html = htm.bind(preact.h);

const nowString = 'Jetzt';

const minBioLength = 20;

const event_persons = (persons) =>
    html`<div class="speakers">${serv.fix_dash(serv.person_names_concat(persons))}:</div>`;

const event_time = (event, time) => {
    const esd = sol.eventStartDate(event);
    const nowish = luxon.Interval.fromDateTimes(esd.minus({minutes: 1}), esd.plus({minutes: 1}));
    const stime = nowish.contains(time) ?
          nowString :
          esd.setLocale('de').toRelative({base: time, unit: 'minutes'});

    return html`<div class="starttime">${stime}</div>`;
};

const event_meta = (event, time) =>
    html`
    <div class="event-meta">
      ${event_persons(sol.eventPersons(event))}
      <div class="title">${serv.fix_dash(sol.eventTitle(event))}</div>
      <div class="subtitle">${sol.eventSubtitle(event)}</div>
      ${event_time(event, time)}
    </div>`;

const event_description = (event) => {
    const description = sol.eventAbstract(event);
    const abstract = sol.eventAbstract(event);

    const atext = sol.defined(abstract) ? abstract : "";
    const dtext = sol.defined(description) ? description : "";

    const text = atext.length >= dtext.length ? atext : dtext;

    return html`
    <div class="event-description">
      <div class="event-description-title">Beschreibung:</div>
      <div class="event-description-text" lang="de">${text}</div>
    </div>`;
};

const event_content = (event) =>
    html`<div class="event-content">${event_description(event)}</div>`;

const speaker_info = (speaker, count) => {
    const name = serv.fix_dash(sol.personName(speaker));
    const bio = sol.personBiography(speaker);

    let inner;
    if (sol.defined(bio) && bio.length >= minBioLength) {
        inner = html`
        <div class="speaker-info">
          <div class="speaker-name">${name}</div>
          <div class="speaker-bio speaker-count-${count}" lang="de">${bio}</div>
        </div>`;
    } else {
        inner = html``;
    }
    return inner;
};

const speaker_meta = (event) => {
    const speakers = sol.eventPersons(event);
    const n = speakers.length;
    return html`<div class="speaker-meta">${speakers.map(s => speaker_info(s, n))}</div>`;
};

const event_info = (event, time) =>
    html`
    <div class="upper">
      ${event_meta(event, time)}
    </div>
    <div class="lower">
      ${event_content(event)}
      ${speaker_meta(event)}
    </div>`;

const footer = (config) =>
    html`<div class="footer">${music.music_credits(config)}</div>`;

const update_main_slide = (data, time, config) => {
    if (sol.defined(data.scheduleData)) {
        const schedule = data.scheduleData;

        const thisRoom = config.roomName;

        const dt = luxon.Duration.fromObject({minutes: 6});

        const events = sol.allEvents(schedule);
        const eventsHere = sol.eventsByRoomName(events, thisRoom);
        const startingEventsHere = sol.startingEvents(eventsHere, time, dt);
        const currentEventsHere = sol.currentEvents(eventsHere, time);
        const endedEventsHere = sol.endedEvents(eventsHere, time, dt);
        const upcomingEventsHere = sol.distinctEvents(startingEventsHere.concat(currentEventsHere, endedEventsHere));

        const inner = html`
        <div class="slide">
        ${upcomingEventsHere.slice(0,1).map(e => event_info(e, time))}
        ${footer(config)}
        </div>`;

        // Add main slide to frame
        const anchorElId = "main";
        const el = document.getElementById(anchorElId);
        preact.render(inner, el);
    };
};


export {
    update_main_slide
};