import React from "react";

import { FiHeart, FiSearch } from "react-icons/fi";
import useSWR from "swr";

import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import { useSelectedTags } from "../../../hooks/useSelectedTags";

import { useFilteredNetworks } from "../../../hooks/useFilteredNetworks";
import { Showcase } from "../../../utils/apiTypes";
import { fetcher } from "../../../utils/swr";
import { NetworkSection } from "./NetworkSection";

export const Networks = (): JSX.Element => {
	const { siteConfig } = useDocusaurusContext();

	const { data, error } = useSWR<Showcase[]>(
		`${siteConfig.customFields.API_URL}/showcase`,
		fetcher,
	);

	const selectedTags = useSelectedTags();
	const filteredNetworks = useFilteredNetworks(data ?? []);

	return (
		<section className="margin-top--lg margin-bottom--xl">
			{!error ? (
				selectedTags.length === 0 ? (
					<>
						<NetworkSection
							title="Our favorites"
							icon={<FiHeart />}
							iconColor="rgb(190 24 93)"
							networks={data?.filter((network) =>
								network.tags.find((tag) => tag.label === "Favorite"),
							)}
						/>
						<NetworkSection title="All networks" networks={data} />
					</>
				) : (
					<NetworkSection
						title="Results"
						icon={<FiSearch />}
						networks={filteredNetworks}
					/>
				)
			) : (
				<div>{JSON.stringify(error)}</div>
			)}
		</section>
	);
};