Untitled

import React, { useRef, useState, useEffect } from "react";
import ScrollToTop from "./ScollToTop";
import Link from "next/link";
import Select from "react-select";
import ReactHtmlParser from "react-html-parser";
import { setUrl } from "../util/strings";

const StoresDirectory = ({ storesCategorysData, storesData }) => {
  const [filteredValues, setValues] = useState(storesData[0]);
  const [initialValues, setInitialValues] = useState(storesData[0]);
  const [storeCategorys, setStoreCategories] = useState(storesCategorysData[0]);
  const [defaultSelect, setDefaultSelect] = useState("SORT BY CATEGORY");

  const alphabet = "abcdefghijklmnopqrstuvwxyz";
  const alphabetIntoArray = alphabet.toUpperCase().split("");

  const itemsRef = useRef([]);

  useEffect(() => {
    itemsRef.current = itemsRef.current.slice(0, alphabetIntoArray.length);
  }, [alphabetIntoArray]);

  useEffect(() => {
    if (
      !!storeCategorys &&
      Array.isArray(storeCategorys) &&
      storeCategorys?.name?.indexOf("Show All") !== -1
    ) {
      return;
    } else {
      !!storeCategorys &&
        setStoreCategories([
          ...storeCategorys,
          storeCategorys.unshift({ id: "", name: "Show All" }),
        ]);
    }
  }, []);

  useEffect(() => {
    setDefaultSelect("SORT BY CATEGORY");
  }, []);

  const AlphaButtons = () => {
    useEffect(() => {
      window.addEventListener("scroll", checkPosition);
      window.addEventListener("resize", init);

      init();
      checkPosition();
    }, []);

    let elements = "";
    let windowHeight = "";

    const init = () => {
      // elements = document.querySelectorAll(".");
      windowHeight = window.innerHeight;
    };

    const checkPosition = () => {
      for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        var positionFromTop = elements[i].getBoundingClientRect().top;

        if (positionFromTop - windowHeight <= 0) {
          element.classList.add("fade-in-element");
          element.classList.remove("");
        }
      }
    };

    const goToSelection = (event, index) => {
      if (itemsRef.current[index]) {
        itemsRef.current[index].scrollIntoView({
          behaviour: "smooth",
          block: "nearest",
        });
      }
    };

    return (
      <>
        {alphabetIntoArray.map((item, index) => (
          <button
            className="alpha-buttons "
            key={index}
            onClick={(e) => goToSelection(e, index)}
          >
            {item}
          </button>
        ))}
      </>
    );
  };

  const DropDown = () => {
    const [drop, setDrop] = useState(false);
    const selectRef = useRef(undefined);

    useEffect(() => {
      const elementHovered = (e) => {
        !!document.getElementsByClassName("css-x688l2-singleValue")[0]
          ? (document.getElementsByClassName(
              "css-x688l2-singleValue"
            )[0].style.color = "white")
          : null;

        !!document.getElementsByClassName("css-2gv9at-placeholder")[0]
          ? (document.getElementsByClassName(
              "css-2gv9at-placeholder"
            )[0].style.color = "white")
          : null;
      };

      !!document.getElementsByClassName("css-4sbs38-Control")[0]
        ? document
            .getElementsByClassName("css-4sbs38-Control")[0]
            .addEventListener("mouseover", elementHovered)
        : null;

      return () => {
        document.removeEventListener("mouseover", elementHovered);
      };
    });

    useEffect(() => {
      const elementHovered = (e) => {
        !!document.getElementsByClassName("css-x688l2-singleValue")[0]
          ? (document.getElementsByClassName(
              "css-x688l2-singleValue"
            )[0].style.color = "black")
          : null;

        !!document.getElementsByClassName("css-2gv9at-placeholder")[0]
          ? (document.getElementsByClassName(
              "css-2gv9at-placeholder"
            )[0].style.color = "black")
          : null;
      };

      !!document.getElementsByClassName("css-4sbs38-Control")[0]
        ? document
            .getElementsByClassName("css-4sbs38-Control")[0]
            .addEventListener("mouseleave", elementHovered)
        : null;

      return () => {
        document.removeEventListener("mouseleave", elementHovered);
      };
    });

    const handleOnchange = (event) => {
      let valuesArray = event.value;

      const filter = valuesArray[0];
      const initialState = [...initialValues];
      let result = [];

      setDefaultSelect(valuesArray[1]);

      if (valuesArray[1] === "Show All") {
        setValues(initialState);
      } else {
        initialState.forEach((item) => {
          let found = item.store_category.filter((item) => item == filter);
          if (found.length) {
            result.push(item);
          }
        });

        setValues(result);
      }
    };

    const customStyles = {
      container: (defaultStyles) => {
        return {
          ...defaultStyles,

          "&:hover": {
            color: "white",
          },
        };
      },
      placeholder: (defaultStyles) => {
        return {
          ...defaultStyles,
          color: "#000000",
          fontFamily: "terminademi",
          fontSize: 10,
          "&:hover": {
            color: "white",
          },
        };
      },
      option: (provided, state) => ({
        ...provided,
        borderBottom: "2px solid black",
        backgroundColor: "white",
        display: "flex",
        alignItems: "left",
        color: "black",
        fontFamily: "terminademi",
        fontSize: 10,
        height: 35,
        "&:hover": {
          backgroundColor: "black",
          color: "white",
          cursor: "pointer",
        },
      }),
      control: () => ({
        // none of react-select's styles are passed to <Control />
        border: "2px solid black",
        width: 311,
        height: 39,
        backgroundColor: "white",
        textTransform: "uppercase",
        fontFamily: "terminademi",
        fontSize: 10,
        display: "flex",
        backgroundImage:
          "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4NCiAgPHBhdGggaWQ9Ikljb25fbWF0ZXJpYWwtYXJyb3ctZm9yd2FyZCIgZGF0YS1uYW1lPSJJY29uIG1hdGVyaWFsLWFycm93LWZvcndhcmQiIGQ9Ik03LDAsNS43NjYsMS4yMzRsNC44ODMsNC44OTFIMHYxLjc1SDEwLjY0OUw1Ljc2NiwxMi43NjYsNywxNGw3LTdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNCkgcm90YXRlKDkwKSIvPg0KPC9zdmc+DQo=)",
        backgroundPosition:
          "-moz-calc(100% - 10px) -moz-calc(0.8em + 2px), -moz-calc(100% - 15px) -moz-calc(1em + 2px), -moz-calc(100% - 2.5em) 0.5em",
        backgroundPosition:
          "calc(100% - 10px) calc(0.8em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em",
        backgroundRepeat: "no-repeat",
        "&:hover": {
          backgroundColor: "black",
          color: "white",
          cursor: "pointer",
          backgroundImage:
            "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4NCiAgPHBhdGggaWQ9Ikljb25fbWF0ZXJpYWwtYXJyb3ctZm9yd2FyZCIgZGF0YS1uYW1lPSJJY29uIG1hdGVyaWFsLWFycm93LWZvcndhcmQiIGQ9Ik03LDAsNS43NjYsMS4yMzRsNC44ODMsNC44OTFIMHYxLjc1SDEwLjY0OUw1Ljc2NiwxMi43NjYsNywxNGw3LTdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNCkgcm90YXRlKDkwKSIgZmlsbD0iI2ZmZiIvPg0KPC9zdmc+DQo=)",
        },
      }),
      singleValue: (provided, state) => ({
        ...provided,
        color: "black",
        "&:hover": {
          color: "white",
        },
      }),
      menu: (base) => ({
        ...base,
        // override border radius to match the box
        borderRadius: 0,
        // kill the gap
        marginTop: 0,
        "&:hover": {
          color: "white",
        },
      }),
      menuList: (base) => ({
        ...base,
        // kill the white space on first and last option
        padding: 0,
      }),
    };

    const options = storeCategorys?.map(function (item) {
      return {
        value: [item.id, item.name],
        label: ReactHtmlParser(item.name),
      };
    });

    return (
      <>
        <Select
          options={options}
          onChange={(e) => handleOnchange(e)}
          styles={customStyles}
          singleValue={options}
          value={defaultSelect}
          placeholder={ReactHtmlParser(defaultSelect)}
        />

        {/* <Form>
          <Form.Group controlId="exampleForm.SelectCustom">
            <Form.Control
              ref={selectRef}
              className={"select-down"}
              onChange={(e) => handleOnchange(e)}
              as="select"
              custom
            >
              <option
                className="pl-2 select-box"
                
                dangerouslySetInnerHTML={{ __html: defaultSelect }}
              ></option>
              <option className="select-box" value={["", "Show All"]}>
                Show All
              </option>
              {storeCategorys.map((item, index) => (
                <option
                  dangerouslySetInnerHTML={{ __html: item.name }}
                  className="select-box"
                  value={[item.id, item.name]}
                  key={index}
                ></option>
              ))}
            </Form.Control>
            <div
              style={{
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                position: "absolute",
                zIndex: drop ? "1" : "-1",
                pointerEvents: "all",
              }}
              onClick={() => {
                setDrop(false);
              }}
            ></div>
          </Form.Group>
        </Form> */}
      </>
    );
  };

  const Filter = () => {
    return (
      <div className="store-results-inner-container">
        {alphabetIntoArray.map((c, i) => {
          return (
            <div key={i} className="alphabet-individual-container ">
              <div className="title-wrapper">
                {filteredValues?.filter((store) =>
                  store?.title?.rendered.startsWith(c)
                ).length === 0 ? (
                  <h1
                    ref={(el) => (itemsRef.current[i] = el)}
                    className={"grey"}
                  >
                    {c}
                  </h1>
                ) : (
                  <h1
                    ref={(el) => (itemsRef.current[i] = el)}
                    className={"notGrey"}
                  >
                    {c}
                  </h1>
                )}
              </div>
              <div className="link-wrapper">
                {filteredValues
                  ?.filter((store) => store?.title?.rendered.startsWith(c))
                  .map((item, index) => (
                    <li key={index}>
                      <Link href={setUrl(item.link)}>
                        <a
                          dangerouslySetInnerHTML={{
                            __html: item.title.rendered,
                          }}
                        ></a>
                      </Link>
                    </li>
                  ))}
              </div>
            </div>
          );
        })}
      </div>
    );
  };

  return (
    <>
      <div className="inner-store-container">
        <div
          className="store-details "
          style={{ padding: 0, marginBottom: "32px", marginTop: "-18px" }}
        >
          <DropDown />
        </div>
      </div>

      <div className="alpha-container">
        <AlphaButtons />
      </div>
      <div className="store-results-container">
        <Filter />
      </div>
      <ScrollToTop />
    </>
  );
};

export default StoresDirectory;