Untitled

import React from "react";
import styles from "./filter.module.scss";
import stores from "../../../data/stores/stores.json";
import { useState } from "react";
import Link from "next/link";
import Container from "@/components/atoms/Container";
import { useEffect } from "react";

const Filter = ({ data }) => {
  const alphabet = "#abcdefghijklmnopqrstuvwxyz".toUpperCase().split("");
  // Append 'All' to beginning of array
  alphabet.unshift("All");
  const alphabetWithoutAll = alphabet.slice(1);
  const [filteredChar, setFilteredChar] = useState("All");
  const [filterByCategory, setFilterByCategory] = useState(null);
  const [isClickAndCollect, setIsClickAndCollect] = useState(false);
  const [results, setResults] = useState(stores);
  const [sortedResults, setSortedResults] = useState(sortResults(results));
  const [usedLetters, setUsedLetters] = useState(Object.keys(results));

  function sortResults(array) {
    const result = [];
    array.forEach((store) => {
      if (!result[store.title.charAt(0)]) {
        result[store.title.charAt(0)] = [];
      }
      result[store.title.charAt(0)].push(store);
    });
    return result;
  }

  useEffect(() => {
    let result = stores;
    if (filterByCategory || isClickAndCollect) {
      result = result.filter((x) => {
        if (x.category === filterByCategory) {
          return x;
        } else if (x.category === filterByCategory && x.clickAndCollect) {
          return x;
        }
      });
    }
  }, [filterByCategory, isClickAndCollect]);

  useEffect(() => {
    let result = stores;
    if (filteredChar !== "All") {
      result = result.filter((x) => x.title?.startsWith(filteredChar));
    }
    if (filterByCategory) {
      result = result.filter((x) => x.category === filterByCategory);
    }
    if (isClickAndCollect) {
      result = result.filter((x) => x.clickAndCollect);
    }
    setResults(result);
  }, [sortedResults, filteredChar, filterByCategory]);

  useEffect(() => {
    setSortedResults(sortResults(results));
  }, [results]);

  useEffect(() => {
    setUsedLetters(Object.keys(sortedResults));
  }, [sortedResults]);

  // useEffect(() => {
  //   setResults((prev) => prev.filter((x) => x.title.startsWith(filteredChar)));
  // }, [filteredChar]);

  // useEffect(() => {
  //   setResults((prev) => prev.filter((x) => (isClickAndCollect ? x.clickAndCollect : x)));
  //   console.log("clickcollect", isClickAndCollect);
  // }, [isClickAndCollect]);

  // useEffect(() => {
  //   setResults((prev) => prev.filter((x) => (filterByCategory ? x.category === filterByCategory : x)));
  // }, [filterByCategory]);

  // useEffect(() => {
  //   setResults(
  //     stores.filter((x) => {
  //       const result = [];
  //       const obj = { category: x.category, clickAndCollect: true };
  //       stores.filter((x) => x === obj);
  //       if (filterByCategory && x?.category === filterByCategory) {
  //         result.push(x);
  //       }
  //     })
  //   );
  // }, [filteredChar, isClickAndCollect, filterByCategory]);

  useEffect(() => {
    console.log("results", results);
  }, [results]);

  return (
    <div className={styles.component}>
      <div className={styles.component_intro}>
        <div className={styles.title}>{data?.content?.title}</div>
        <div className={styles.body}>{data?.content?.body}</div>

        <div className={styles.component_categories}>
          {/* Category dropdown button */}
          <label className={styles.button} for="category-dropdown">
            {data?.content?.sortBy?.label}
          </label>
          <input id="category-dropdown" type="checkbox" />
          {/* Category dropdown content */}
          <div className={styles.content}>
            {data &&
              data.content?.sortBy?.categories?.map((category) => (
                <div className={styles.dropdown_content_category} key={category.id}>
                  <ul>
                    <li tabIndex={category.id} onClick={() => setFilterByCategory(category.label)}>
                      {category?.label}
                    </li>
                  </ul>
                </div>
              ))}
          </div>
          {/* Click and collect filter */}
          <div className={styles.clickAndCollect}>
            <input type="checkbox" id="clickAndCollect" onClick={() => setIsClickAndCollect(!isClickAndCollect)} />
            <label for="clickAndCollect" className={styles.clickAndCollect_label}>
              {data?.content?.clickAndCollect?.label}
            </label>
          </div>
        </div>
      </div>
      {/* Letter list */}
      <Container type="content" className={styles.letter_list_wrap}>
        <div className={styles.letter_list}>
          {alphabet.map((letter) => (
            <button
              className={letter === filteredChar ? styles.letter_list_item_active : styles.letter_list_item}
              onClick={() => setFilteredChar(letter)}
              disabled={!usedLetters.includes(letter || letter.toLowerCase()) && letter !== "All"}
            >
              {letter}
            </button>
          ))}
        </div>
      </Container>

      {/* Results table */}
      <Container type="content" className={styles.results}>
        {filteredChar === "All" ? (
          alphabetWithoutAll.map((letter, index) => (
            <div className={styles.results_item} key={index}>
              <span className={styles.letter}>{letter}</span>
              <div className={styles.result}>
                <ul>
                  {sortedResults[letter]?.map((result) => (
                    <li className={styles.result_item}>
                      <Link href={result.slug}>{result.title}</Link>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))
        ) : (
          <div className={styles.results_item}>
            <span className={styles.letter}>{filteredChar}</span>
            <div className={styles.result}>
              <ul>
                {sortedResults[filteredChar]?.map((result) => (
                  <li>
                    <Link href={result.slug}>{result?.title}</Link>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        )}
      </Container>
    </div>
  );
};

export default Filter;