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

function Applications({ contentType }: any) {
	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
		endpoint: 'api/apps',
	});
	const [applicationData, setApplicationData] = useState<any>([]);
	const { isMobile } = useCommonHooks();

	useEffect(() => {
		if (apps && !isAppsFetching) {
			setApplicationData(apps);
		}
	}, [apps, isAppsFetching]);

	return (
		<>
			{applicationData.length > 0 && contentType.length > 0 && (
				<Stack id='apps' style={{ gap: 0 }}>
					<Text className={textClasses.sectionTitle} classNames={textClasses}>
						Applications
					</Text>
					<Stack
						style={{
							gap: '.25rem',
							backgroundSize: 'cover',
							borderBottom: '0px solid',
							display: 'grid',
							gridColumnGap: '5px',
							gridRowGap: '5px',
							gridTemplateColumns: isMobile ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr',
							gridTemplateRows: '64px',
							paddingBottom: 'var(--module-spacing)',
						}}
					>
						{applicationData?.map((application: any) => {
							if (
								contentType.includes(application.filterName) ||
								contentType.includes('All')
							)
								return (
									<AppItem
										key={application.name}
										name={application.name}
										url={application.url}
										icon={application.icon}
										category={application.category}
									/>
								);
						})}
					</Stack>
				</Stack>
			)}
		</>
	);
}

export default Applications;