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

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

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

	useEffect(() => {
		if (groupData && groupsIsFetched) {
			const groupList = groupData?.map((category: any) => {
				return category;
			});
			setGroups(groupList);
		}
	}, [groupData, groupsIsFetched]);

	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' : '1fr 1fr 1fr 1fr 1fr',
								gridTemplateRows: 'auto',
							}}
						>
							{groups.map((category: any) => {
								if (
									contentType.includes(category.filterName) ||
									contentType.includes('All')
								) {
									return (
										<LinkGroups
											key={category.categoryName}
											category={category.categoryName}
											links={bookmarkData.filter(
												(bookmark: any) => bookmark.category === category.categoryName,
											)}
										/>
									);
								}
							})}
						</Stack>
					</Stack>
				)}
		</>
	);
}

export default Links;