import { Stack, Text } from '@mantine/core';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
import LinkGroups from './LinkGroups';

function Links({ contentType }: { contentType: [string] }) {
	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
		endpoint: 'api/links',
	});
	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
		endpoint: 'api/categories',
	});
	const { isMobile, bookmarkSort, bookmarkDensity } = useCommonHooks();
	const [bookmarkData, setBookmarkData] = useState<Bookmark[]>([]);
	const [groups, setGroups] = useState<BookmarkGroup[]>([]);

	useEffect(() => {
		if (linkData && linksIsFetched) {
			setBookmarkData(linkData);
		}
	}, [linksIsFetched, linkData]);

	useEffect(() => {
		if (groupData && groupsIsFetched) {
			const groupList = groupData?.map((category: BookmarkGroup) => {
				return category;
			});
			setGroups(
				groupList.sort((a: any, b: any) => {
					switch (bookmarkSort) {
						case 'A>Z':
							return a.categoryName > b.categoryName ? 1 : -1;
						case 'Z>A':
							return a.categoryName < b.categoryName ? 1 : -1;
						case 'Newest':
							return a.id < b.id ? 1 : -1;
						case 'Oldest':
							return a.id > b.id ? 1 : -1;
						case 'Custom':
							return a.index > b.index ? 1 : -1;
					}
				}),
			);
		}
	}, [groupData, groupsIsFetched, bookmarkSort]);

	return (
		<>
			{groupsIsFetched &&
				linksIsFetched &&
				groups?.length > 0 &&
				contentType.length > 0 && (
					<Stack id='links' style={{ gap: 0 }}>
						<Text className={textClasses.sectionTitle} classNames={textClasses}>
							Bookmarks
						</Text>
						<Stack
							style={{
								display: 'grid',
								flexWrap: 'nowrap',
								gridColumnGap: '20px',
								gridRowGap: '0px',
								gridTemplateColumns: isMobile
									? '1fr 1fr'
									: `repeat(${bookmarkDensity}, 1fr)`,
								gridTemplateRows: 'auto',
							}}
						>
							{groups
								?.filter(
									(category: BookmarkGroup) =>
										contentType.includes(category.filterName) ||
										contentType.includes('All'),
								)

								.map((category: BookmarkGroup) => {
									return (
										<LinkGroups
											key={category.categoryName}
											category={category.categoryName}
											links={bookmarkData.filter(
												(bookmark: Bookmark) =>
													bookmark.category === category.categoryName,
											)}
										/>
									);
								})}
						</Stack>
					</Stack>
				)}
		</>
	);
}

export default Links;