---
import Default from "@astrojs/starlight/components/PageSidebar.astro";
import MobileTableOfContents from "@astrojs/starlight/components/MobileTableOfContents.astro";
import { Icon } from "@astrojs/starlight/components";
const isLearningPage = Astro.locals.starlightRoute.id === "learn";

import { getCollection } from "astro:content";

const categories = await getCollection("vocabList");
const typesSet = new Set<string>();
categories.forEach((category) => {
  category.data.words.forEach((word) => {
    if (word.type) {
      typesSet.add(word.type);
    }
  });
});
const types = Array.from(typesSet).sort();
---

{
  isLearningPage ? (
    <>
      <div class="lg:sl-hidden">Filters</div>
      <div class="right-sidebar-panel sl-hidden lg:sl-block">
        <div class="sl-container">
          <div class="filters">
            <div class="category-filters">
              <h2>Categories</h2>
              {/* Check boxes for each category */}
              {categories.map((category) => (
                <div class="filter">
                  <input
                    data-filter="category"
                    type="checkbox"
                    id={category.id}
                    name={category.id}
                    value={category.id}
                    checked
                  />
                  <label for={category.id}>{category.id}</label>
                </div>
              ))}
            </div>
            {/* Check boxes for each type of word */}
            <div class="type-filters">
              <h2>Types</h2>
              {types.map((type) => (
                <div class="filter">
                  <input
                    data-filter="type"
                    type="checkbox"
                    id={type}
                    name={type}
                    value={type}
                    checked
                  />
                  <label for={type}>{type}</label>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  ) : (
    <Default>
      <slot />
    </Default>
  )
}

<style>
  .filters {
    display: flex;
    gap: 2em;
    margin-bottom: 1em;
  }
  .sl-container {
    padding: 1rem 2em;
  }
  .category-filters,
  .type-filters {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }
  .filter {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
</style>
