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

// busca repositorios
// nome do repo e linguagem

interface Repo {
  name: string;
  language: string;
}

interface IRepoListProps {
  repoList: Repo[] | null;
  isLoading?: boolean;
  searchLang?: string;
}

function RepoList({ repoList, isLoading, searchLang }: IRepoListProps) {
  if (isLoading) return <div>Carregando ...</div>;

  if (!repoList) {
    return <div>Não tem nada</div>;
  }

  console.log({ repoList });

  const filteredRepos = repoList.filter((repo) =>
    repo.language.includes(searchLang)
  );

  return (
    <ul>
      {repoList.map((list) => (
        <li key={`list-${list.name}${list.language}`}>
          <div style={{ display: "flex" }}>
            <span style={{ marginRight: "12px" }}>{list.name}</span>
            <strong>{list.language}</strong>
          </div>
        </li>
      ))}
    </ul>
  );
}

interface LanguageOptions {
  slug: string;
  name: string;
}

function SelectLanguage({
  options,
  onChange
}: {
  options: LanguageOptions[];
  onChange: (value: string | null) => void;
}) {
  const [selectedValue, setValue] = useState<string | null>(null);

  useEffect(() => {
    onChange(selectedValue);
  }, [selectedValue]);

  return (
    <select
      name="select"
      onChange={(ev) => {
        setValue(ev.target.value);
        // console.log(ev.target.value);
      }}
    >
      <option value={undefined} />
      {options.map(({ slug, name }) => (
        <option key={slug} value={slug}>
          {name}
        </option>
      ))}
    </select>
  );
}

const mockLanguages = [
  {
    name: "Javascript",
    slug: "javascript"
  },
  {
    name: "Typescript",
    slug: "typescript"
  }
];

export default function App() {
  const [repos, setRepos] = useState<Repo[] | null>(null);
  const [isLoading, setLoading] = useState(false);
  const [selectedLang, setLang] = useState<string | null>(null);

  const url = "https://api.github.com/orgs/vtex/repos?per_page=100";

  async function getRepos(url: string) {
    setLoading(true);
    try {
      const response = await fetch(url);
      const result = await response.json();
      return result;
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    (async () => {
      const fetchResult = await getRepos(url);
      setRepos(fetchResult);
    })();
  }, []);

  const memoizedList = useMemo(() => repos, [repos]);

  return (
    <div className="App">
      <h2>Vamos começar por aqui</h2>

      <SelectLanguage options={mockLanguages} onChange={setLang} />

      <RepoList
        isLoading={isLoading}
        repoList={memoizedList}
        searchLang={selectedLang ?? undefined}
      />
    </div>
  );
}