import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { sortBy } from "lodash";
import { DataFactory, Quad_Subject, Store } from "n3";
import { shared } from "./shared";
import { EV, fetchGraph, parseGraph, RDF } from "./parseRdf";
import { DisplayEvent } from "./DisplayEvent";

const { namedNode } = DataFactory;

@customElement("fd-countdown")
export class FdCountdown extends LitElement {
  static styles = [
    shared,
    css`
      ol {
        list-style: none;
        font-size: 16px;
        background: #cd66bb2e;
        padding: 9px;
        width: fit-content;
        position: relative;
        top: -21px;
        border-radius: 14px;
      }
      span.d {
        opacity: 0.5;
      }
      li:has(.until) {
        color: #666;
      }
      li:has(.until-2d) {
        color: #fff;
      }
      li:has(.until-7d) {
        color: #ccc;
      }
      li:has(.until-30d) {
        color: #999;
      }
      li:has(.until)::before {
        display: inline-block;
        width: 1.4em;
        content: "";
      }
      li:has(.until-2d)::before {
        content: "🌕";
      }
      li:has(.until-7d)::before {
        content: "🌙";
      }
      li:has(.until-30d)::before {
        content: "🌑";
      }
    `,
  ];
  @property() evs: DisplayEvent[];
  constructor() {
    super();
    this.evs = [];
    this.load();
    setInterval(this.load.bind(this), 5 * 60 * 1000);
  }
  async load() {
    const store = new Store();
    const r = await fetchGraph("/gcalendarwatch/graph/calendar/countdown");
    await parseGraph(r, (store: Store) => {
      const graph = namedNode(EV + "gcalendar");
      this.evs = [];
      store.getSubjects(namedNode(RDF + "type"), namedNode(EV + "Event"), graph).forEach((ev: Quad_Subject) => {
        const de = new DisplayEvent(store, graph, ev);
        this.evs = [...this.evs, de];
      });
      this.evs = sortBy(this.evs, "start");
    });
  }
  render() {
    return html`<h1 data-text="Coming Soon">Coming Soon</h1>
      <ol>
        ${this.evs.map((d) => html`<li>In ${d.inHowLong()}, ${d.title}</li>`)}
      </ol> `;
  }
}