import { Stack, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import {useQueryAPI} from '../../../hooks/useAPI';
import texts from '../../../styles/Text.module.css';
import LinkGroups from './LinkGroups';

function Links() {
	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
		endpoint: 'api/links',
	});
	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
		endpoint: 'api/categories',
	});
	const [bookmarks, setBookmarks] = useState([]);
	const [categories, setCategories] = useState([]);

	useEffect(() => {
		if (linksIsFetched && groupsIsFetched) {
			setBookmarks(linkData);
			setCategories(groupData);
		}
	}, [linksIsFetched, groupsIsFetched]);

	return (
		<>
			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
				<Stack id='links' style={{ gap: 0 }}>
					<Text className={texts.sectionTitle} classNames={texts}>Bookmarks</Text>
					<Stack
						style={{
							display: 'grid',
							flexWrap: 'nowrap',
							gridColumnGap: '20px',
							gridRowGap: '0px',
							gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
							gridTemplateRows: 'auto',
						}}
					>
						{categories.map((category: any) => {
							if (
								category.column_filter === localStorage.getItem('contenttype') ||
								localStorage.getItem('contenttype') === 'All'
							) {
								return (
									<LinkGroups
										key={category.id}
										category={category.category_name}
										links={bookmarks.filter(
											(bookmark: any) => bookmark.category === category.category_index,
										)}
									/>
								);
							}
						})}
					</Stack>
				</Stack>
			)}
		</>
	);
}

export default Links;