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

function Applications({ contentType }: { contentType: string[] }) {
	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
		endpoint: 'api/enabledApplications',
	});
	const { appSort, appDensity, appScale, theme } = useCommonHooks();
	const [applications, setApplications] = useState<Application[]>([]);

	useEffect(() => {
		if (applicationData && !isApplicationDataFetching) {
			setApplications(
				applicationData.sort((a: Application, b: Application) => {
					switch (appSort) {
						case 'A>Z':
							return a.name > b.name ? 1 : -1;
						case 'Z>A':
							return a.name < b.name ? 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.index > b.index ? 1 : -1;
					}
				}),
			);
		}
	}, [applicationData, isApplicationDataFetching, appSort]);
	return (
		<>
			{applications.length > 0 && contentType.length > 0 && (
				<Stack gap={0}>
					<Text
						className={textClasses.sectionTitle}
						classNames={textClasses}
						style={{
							boxShadow:
								theme.textShadowsEnabled &&
								'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
						}}
					>
						Applications
					</Text>
					<Stack
						style={{
							gap: '.25rem',
							display: 'grid',
							gridTemplateColumns: `repeat(${appDensity}, 1fr)`,
						}}
					>
						{applications
							?.filter(
								(application: Application) =>
									contentType.includes(application.filterName) ||
									contentType.includes('All'),
							)
							.map((application: Application) => {
								return (
									<AppItem
										key={application.name}
										name={application.name}
										url={application.url}
										icon={application.icon}
										enabled={application.enabled}
										scale={appScale}
										linksActive
									/>
								);
							})}
					</Stack>
				</Stack>
			)}
		</>
	);
}

export default Applications;