---
import type { ScheduleDay } from "../data/events";

type Props = {
  schedule: ScheduleDay[];
  asTabs?: boolean;
};

const { schedule, asTabs = false } = Astro.props;
---

<section class="content-section">
  <h2>Schedule</h2>
  {asTabs ? (
    <div class="schedule-tabs" data-schedule-tabs>
      <div class="schedule-tablist" role="tablist" aria-label="Schedule days">
        {schedule.map((day, index) => (
          <button
            type="button"
            role="tab"
            id={`schedule-tab-${index}`}
            aria-controls={`schedule-panel-${index}`}
            aria-selected={index === 0 ? "true" : "false"}
            tabindex={index === 0 ? "0" : "-1"}
            data-schedule-tab={`${index}`}
          >
            <span>{day.label}</span>
            {day.date && <small>{day.date}</small>}
          </button>
        ))}
      </div>

      <div class="schedule-grid">
        {schedule.map((day, index) => (
          <article
            class="schedule-day"
            id={`schedule-panel-${index}`}
            role="tabpanel"
            tabindex="0"
            aria-labelledby={`schedule-tab-${index}`}
            data-schedule-panel={`${index}`}
            hidden={index !== 0}
          >
            <div class="schedule-day__head">
              <h3>{day.label}</h3>
              {day.date && <p>{day.date}</p>}
              {day.moderator && <p>{day.moderator}</p>}
            </div>
            <ol>
              {day.items.map((item) => (
                <li class:list={["schedule-item", item.kind && `schedule-item--${item.kind}`]}>
                  <time>{item.time}</time>
                  <div>
                    <h4>{item.title}</h4>
                    {item.speaker && <p class="speaker">{item.speaker}</p>}
                    {item.affiliation && <p class="muted">{item.affiliation}</p>}
                    {item.detail && <p>{item.detail}</p>}
                    {item.links && (
                      <div class="inline-links">
                        {item.links.map((link) => <a href={link.href}>{link.label}</a>)}
                      </div>
                    )}
                  </div>
                </li>
              ))}
            </ol>
          </article>
        ))}
      </div>
    </div>
  ) : (
    <div class="schedule-grid">
      {schedule.map((day) => (
        <article class="schedule-day">
          <div class="schedule-day__head">
            <h3>{day.label}</h3>
            {day.date && <p>{day.date}</p>}
            {day.moderator && <p>{day.moderator}</p>}
          </div>
          <ol>
            {day.items.map((item) => (
              <li class:list={["schedule-item", item.kind && `schedule-item--${item.kind}`]}>
                <time>{item.time}</time>
                <div>
                  <h4>{item.title}</h4>
                  {item.speaker && <p class="speaker">{item.speaker}</p>}
                  {item.affiliation && <p class="muted">{item.affiliation}</p>}
                  {item.detail && <p>{item.detail}</p>}
                  {item.links && (
                    <div class="inline-links">
                      {item.links.map((link) => <a href={link.href}>{link.label}</a>)}
                    </div>
                  )}
                </div>
              </li>
            ))}
          </ol>
        </article>
      ))}
    </div>
  )}
</section>

{asTabs && (
  <script is:inline>
    const scheduleRoot = document.querySelector("[data-schedule-tabs]");

    if (scheduleRoot) {
      const tabs = Array.from(scheduleRoot.querySelectorAll("[data-schedule-tab]"));
      const panels = Array.from(scheduleRoot.querySelectorAll("[data-schedule-panel]"));

      const activateScheduleDay = (dayIndex) => {
        tabs.forEach((tab) => {
          const isActive = tab.getAttribute("data-schedule-tab") === dayIndex;
          tab.setAttribute("aria-selected", isActive ? "true" : "false");
          tab.setAttribute("tabindex", isActive ? "0" : "-1");
        });

        panels.forEach((panel) => {
          panel.hidden = panel.getAttribute("data-schedule-panel") !== dayIndex;
        });
      };

      tabs.forEach((tab, index) => {
        tab.addEventListener("click", () => {
          activateScheduleDay(tab.getAttribute("data-schedule-tab"));
        });

        tab.addEventListener("keydown", (event) => {
          const keyMap = {
            ArrowRight: 1,
            ArrowLeft: -1,
          };

          if (event.key === "Home" || event.key === "End" || event.key in keyMap) {
            event.preventDefault();
            const nextIndex =
              event.key === "Home"
                ? 0
                : event.key === "End"
                  ? tabs.length - 1
                  : (index + keyMap[event.key] + tabs.length) % tabs.length;
            const nextTab = tabs[nextIndex];
            nextTab.focus();
            activateScheduleDay(nextTab.getAttribute("data-schedule-tab"));
          }
        });
      });
    }
  </script>
)}
