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 BookmarkGroups from './BookmarkGroups';

function Bookmarks({ contentType }: { contentType: string[] }) {
	const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
		endpoint: 'api/bookmarks',
	});
	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
		endpoint: 'api/bookmarkCategories',
	});
	const { bookmarkSort, bookmarkDensity, bookmarkScale } = useCommonHooks();
	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
	const [groups, setGroups] = useState<BookmarkGroup[]>([]);

	useEffect(() => {
		if (bookmarkData && bookmarksIsFetched) {
			setBookmarks(bookmarkData);
		}
	}, [bookmarksIsFetched, bookmarkData]);

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

	return (
		<>
			{groupsIsFetched &&
				bookmarksIsFetched &&
				groups?.length > 0 &&
				contentType.length > 0 && (
					<Stack gap={0}>
						<Text
							className={textClasses.sectionTitle}
							classNames={textClasses}
							mb={'-.5rem'}
							mt={'1.25rem'}
						>
							Bookmarks
						</Text>
						<Stack
							style={{
								display: 'grid',
								gridRowGap: '0px',
								gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`,
							}}
						>
							{groups
								?.filter(
									(category: BookmarkGroup) =>
										contentType.includes(category.filterName) ||
										contentType.includes('All'),
								)

								.map((category: BookmarkGroup) => {
									return (
										<BookmarkGroups
											key={category.categoryName}
											category={category.categoryName}
											bookmarks={bookmarks.filter(
												(bookmark: Bookmark) =>
													bookmark.category === category.categoryName,
											)}
											bookmarkScale={bookmarkScale}
										/>
									);
								})}
						</Stack>
					</Stack>
				)}
		</>
	);
}

export default Bookmarks;