<script lang="ts">
  import Hero from '$lib/Hero.svelte';
  import ListFilter from '$lib/ListFilter.svelte';
  import Categories from '$lib/Categories.svelte';
  import SearchSummary from '$lib/SearchSummary.svelte';
  import Templates from '$lib/TemplateList.svelte';
  import NoResults from '$lib/NoResults.svelte';
  import Footer from '$lib/Footer.svelte';
  import type { Template } from '$src/Types';

  export let data;

  let searchTerm = '';

  let selectedCategories: string[] = [];
  
  $: filteredTemplates = data.templates.filter((template: Template) => {
    const compareStr = (str1: string, str2: string) =>
      (str1 || '').toLowerCase().includes(str2.toLowerCase());

    if (selectedCategories.length) {
      const templateCategories = template.categories || [];
      const hasSelectedCategory = selectedCategories.some((cat) =>
        templateCategories.includes(cat)
      );
      if (!hasSelectedCategory) return false;
    }
    return (
      compareStr(template.title, searchTerm) ||
      compareStr(template.description, searchTerm) ||
      compareStr((template.categories || []).join(''), searchTerm)
    );
  });

  const toggleCategory = (category: string) => {
    if (selectedCategories.includes(category)) {
      selectedCategories = selectedCategories.filter((cat) => cat !== category);
    } else {
      selectedCategories = [...selectedCategories, category];
    }
  };

  const clearSearch = () => {
    searchTerm = '';
    selectedCategories = [];
  }
</script>

<!-- Main title, and CTA buttons -->
<Hero />

<!-- Search bar, and Templates sub-title -->
<ListFilter bind:searchTerm={searchTerm} />

<!-- List of categories to filter by -->
<Categories
  categories={data.categories}
  selectedCategories={selectedCategories}
  toggleCategory={toggleCategory}
/>

<!-- Text showing num results, and users search term + filters  -->
<SearchSummary
  searchTerm={searchTerm}
  selectedCategories={selectedCategories}
  clearSearch={clearSearch}
  numResults={filteredTemplates.length}
  totalResults={data.templates.length}
/>

<!-- List of available templates (filtered, if needed) -->
<Templates templates={filteredTemplates} />

<!-- If there are no templates matching search term, show lil message -->
{#if !filteredTemplates.length}
  <NoResults />
{/if}

<!-- Footer showing license and source code links -->
<Footer />
