import React, { useEffect, useState, useMemo } from "react";
import "../App.css";

import Header from "../components/Header";
import Footer from "../components/Footer";

const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const ALL = "all";
const characterArray = CHARS.split();
characterArray.unshift(ALL);

function Directory() {
  const [apiResult, setApiResult] = useState([]);
  const [selectedCharacter, setSelectedCharacter] = useState(ALL);

  useEffect(() => {
    document.title = "Subdomains Directory | Free subdomains | Hej";
    getDomains();
  }, []);

  const filteredResults = useMemo(() => {
    const names = [];
    for (let x = 0; x < apiResult.length; x++) {
      names.push(apiResult[x].subdomain);
    }
    const filtered = names.filter((name) =>
      name.toLowerCase().includes(selectedCharacter.toLowerCase())
    );
    return filtered;
  }, [apiResult, selectedCharacter]);

  const getDomains = async () => {
    try {
      await fetch("http://localhost:3001/allDomains")
        .then((response) => response.json())
        .then((response) => {
          setApiResult(response);
        });
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <>
      <Header />
      <section id="faq" className="section">
        <div className="container">
          <div className="row">
            <div className="col-lg-6 col-md-12 offset-lg-3 title-section">
              <h2 className="text-heading section-heading">
                Subdomains Directory
              </h2>
            </div>
            <div>
              <ul className="tags">
                {characterArray.map((character) => (
                  <li key={character}>
                    <button
                      onClick={(e) => setSelectedCharacter(character)}
                      className="tag"
                      to="#"
                    >
                      {character}
                    </button>
                  </li>
                ))}
              </ul>
              <br />
              <br />
              {filteredResults.length > 0 ? (
                <ul>
                  {filteredResults.map((item, i) => {
                    console.log("item: " + item);
                    console.log("iterator for key: " + i);
                    return <li key={i}>{item}</li>;
                  })}
                </ul>
              ) : (
                <div class="alert alert-danger" role="alert">
                  There are no subdomains starting with T.
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

export default Directory;