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, theme, textShadowStyle } =
		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.toLocaleLowerCase() >
									b.categoryName.toLocaleLowerCase()
									? 1
									: -1;
							case 'Z>A':
								return a.categoryName.toLocaleLowerCase() <
									b.categoryName.toLocaleLowerCase()
									? 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;
							default:
								return 0;
						}
					})
					?.filter(
						(category: BookmarkGroup) =>
							contentType.includes(category.filterName) || contentType.includes('All'),
					),
			);
		}
	}, [groupData, groupsIsFetched, bookmarkSort, contentType]);

	return (
		<>
			{groupsIsFetched &&
				bookmarksIsFetched &&
				groups?.length > 0 &&
				contentType.length > 0 && (
					<Stack gap={0}>
						<Text
							className={textClasses.sectionTitle}
							classNames={textClasses}
							mb={'-.5rem'}
							mt={'1.25rem'}
							style={{
								boxShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
							}}
						>
							Bookmarks
						</Text>
						<Stack
							style={{
								display: 'grid',
								gridRowGap: '0px',
								gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`,
							}}
						>
							{groups
								.filter((category: BookmarkGroup) => category.enabled === 1)
								.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;