Untitled

import React from "react";
import styles from "./filter.module.scss";
import stores from "../../../data/stores/stores.json";
import { useState } from "react";
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 [isClickAndCollect, setIsClickAndCollect] = useState(false);

  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_dropdown}>
          {/* 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}>{category?.label}</li>
                  </ul>
                </div>
              ))}
          </div>
          {/* Letter list */}
          <div className={styles.letter_list_wrap}>
            <div className={styles.letter_list}>
              {stores.map(store => store.title.charAt(0))}
              {/* {alphabet.map((letter) => (
                <button
                  className={
                    letter === filteredChar
                      ? styles.letter_list_item_active
                      : styles.letter_list_item
                  }
                  onClick={() => setFilteredChar(letter)}
                >
                  {letter}
                </button>
              ))} */}
              {/* {alphabet.map((letter) => (
                <div
                  className={
                    letter === filteredChar
                      ? styles.letter_list_item_active
                      : styles.letter_list_item
                  }
                  onClick={() => setFilteredChar(letter)}
                >
                  {letter}
                </div>
              ))} */}
            </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>
          {/* Results table */}
          <div 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>
                      {stores
                        .filter((store) =>
                          isClickAndCollect
                            ? store?.title.includes(letter) && store.clickAndCollect
                            : store?.title.includes(letter)
                        )
                        .map((result) => (
                          <li>{result?.title}</li>
                        ))}
                    </ul>
                  </div>
                </div>
              ))
            ) : (
              <div className={styles.results_item}>
                <span className={styles.letter}>{filteredChar}</span>
                <div className={styles.result}>
                  <ul>
                    {stores
                      .filter((store) =>
                        isClickAndCollect
                          ? store.title.includes(filteredChar) && store.clickAndCollect
                          : store.title.includes(filteredChar)
                      )
                      .map((item) => (
                        <li>{item.title}</li>
                      ))}
                  </ul>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Filter;
// {stores
//   .filter((store) =>
//     isClickAndCollect
//       ? (store?.clickAndCollect === true, store?.title.includes(filteredChar))
//       : store?.title.includes(filteredChar)
//   )
//   .map((result) => (
//     <li>{result?.title}</li>
//   ))}