// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { formats } from "dayjs/locale/*";
import Ressource from "../src/Ressource";
import TimeLine from "../src/Timeline";
import "../src/Ressource";
import { IEvent } from "../src/Event";
import dayjs from "dayjs";

// TimeLine.extendStyle.push(new_css)
const emptyTimeline: TimeLine = document.createElement(
  "jc-timeline"
) as TimeLine;
let title = document.createElement("h2");
title.innerText = "Empty Timeline";
document.body.appendChild(title);
document.body.appendChild(emptyTimeline);
emptyTimeline.setLegendUnitFormat("d", "dddd D MMMM");

emptyTimeline.setAttribute("legendSpan", "2");
emptyTimeline.setAttribute("slotduration", "30");
emptyTimeline.setAttribute("slotWidth", "30");
emptyTimeline.end = "2021-09-12T15:59:59.999Z";
emptyTimeline.start = "2021-09-10T13:00:00.000Z";

const timeline: TimeLine = document.createElement("jc-timeline") as TimeLine;
timeline.customStyle = `.bubble{
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    background: green;
}
bubble.red{
    background: red;
}
bubble.orange{
    background: orange;
}`;
// timeline.defaultBackground = "maroon";

const rows: Array<Ressource> = [
  { id: "1", title: "Ressource 1 DarkSlate", eventBgColor: "DarkSlateBlue" },
  { id: "3", title: "Ressource 3" },
  { id: "4", title: "Ressource 4" },
  { id: "5", title: "Ressource 5" },
].map((i) => new Ressource(i));
rows[2].parent = rows[1];
rows[0].parent = rows[1];
const data = dayjs().startOf("hour").hour(9);
const timeslots: Array<IEvent> = [
  {
    id: "1",
    title: "Fixed ressource",
    ressourceId: "3",
    start: data.subtract(3, "h").toDate(),
    end: data.toDate(),
    ressourceEditable: false,
    bgColor: "darkgreen",
  },
  {
    id: "2",
    title: "Fixed time",
    ressourceId: "3",
    start: data.toDate(),
    end: data.endOf("hour").add(1, "h").toDate(),
    editable: false,
    bgColor: "FireBrick",
  },
  {
    id: "3",
    ressourceId: "4",
    start: data.add(1, "h").toDate(),
    end: data.endOf("hour").add(2, "h").toDate(),
    content: '<div class="bubble">0</div>',
  },
  {
    id: "4",
    ressourceId: "3",
    start: data.startOf("day").subtract(1, "h").toDate(),
    end: dayjs().endOf("hour").add(1, "h").toDate(),
  },
];
for (let i = 5; i < 10; i++) {
  timeslots.push({
    id: i.toFixed(0),
    title: "event " + i,
    ressourceId: "1",
    start: data.add(i, "h").toDate(),
    end: data.add(i, "h").endOf("hour").add(1, "h").toDate(),
  });
}
timeline.addRessource(rows[1]);
timeline.addRessource(rows[0]);
timeline.addRessource(rows[2]);
timeline.addRessource(rows[3]);

timeline.addEvents(timeslots);
timeline.addEventListener("item-selected", (e) => {
  console.log((e as CustomEvent).detail);
});
timeline.addEventListener("change-event", (e) => {
  console.log((e as CustomEvent).detail);
});
timeline.addEventListener("reorder-ressource", (e) => {
  console.log((e as CustomEvent).detail);
});

title = document.createElement("h2");
title.innerText = "Generic Timeline";
document.body.appendChild(title);
document.body.appendChild(timeline);

const nestedTimeline: TimeLine = document.createElement(
  "jc-timeline"
) as TimeLine;

title = document.createElement("h2");
title.innerText = "Multiple level Timeline";
document.body.appendChild(title);
document.body.appendChild(nestedTimeline);

const ressources = Array(8)
  .fill(0)
  .map((_, i) => new Ressource({ id: "" + i, title: "level " + i }));
for (let i = 0; i < ressources.length - 1; i++) {
  ressources[i + 1].parent = ressources[i];
}
ressources.forEach((r) => nestedTimeline.addRessource(r));
ressources[0].collapseChildren = true;
const nItem = 32;
const timeslots2 = Array(nItem)
  .fill(0)
  .map((_, i) => {
    return {
      id: "" + i,
      ressourceId: "" + (i % 8),
      title: "Item " + i,
      start: data.add(i / 2 - 5, "h").toDate(),
      end: data.add(i / 2 - 4, "h").toDate(),
      bgColor: "hsl(" + Math.round((i / (nItem - 1)) * 360) + ", 100%, 50%)",
    };
  });
nestedTimeline.addEvents(timeslots2);