import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import { FiAlertCircle } from 'react-icons/fi';
import { actionIconClasses, boxClasses, textClasses } from 'styles';

function AppSettingsItem({
	url,
	icon,
	name,
	enabled,
	allIcons,
}: {
	url: string;
	icon: string;
	name: string;
	enabled: number;
	allIcons: any;
}) {
	const Icon = allIcons[icon];
	const [textDecoration, setTextDecoration] = useState<string>('none');
	const [hover, setHover] = useState<boolean>(false);
	const { isMobile, theme } = useCommonHooks();
	return (
		<Box pos={'relative'}>
			{enabled === 0 && (
				<Tooltip label={<Text c={theme.primaryColor}>This app is disabled</Text>}>
					<ActionIcon
						className={actionIconClasses.settingsTooltip}
						classNames={actionIconClasses}
						pos={'absolute'}
						size={'xl'}
						variant='subtle'
						style={{ zIndex: 1 }}
					>
						<FiAlertCircle color='red' />
					</ActionIcon>
				</Tooltip>
			)}
			<Box
				component='a'
				onMouseOver={() => {
					setTextDecoration('underline');
					setHover(true);
				}}
				onMouseOut={() => {
					setTextDecoration('none');
					setHover(false);
				}}
				className={boxClasses.appItemBox}
			>
				{hover && (
					<svg
						style={{ position: 'absolute', borderRadius: '6px' }}
						height='100%'
						width='100%'
						xmlns='http://www.w3.org/2000/svg'
					>
						<rect rx='16' ry='16' height='100%' width='100%' strokeLinejoin='round' />
					</svg>
				)}
				<Stack
					align={isMobile ? 'center' : undefined}
					justify={isMobile ? 'center' : undefined}
					style={{
						height: '128px',
						width: isMobile ? '100%' : undefined,
						marginRight: isMobile ? '0' : '1em',
						marginLeft: isMobile ? '0' : '2em',
						paddingTop: isMobile ? '0' : '32px',
					}}
				>
					{Icon && <Icon style={{ height: '64px', width: '64px' }} />}
				</Stack>
				<Stack
					style={{
						display: 'flex',
						flexDirection: 'column',
						justifyContent: 'center',
						flex: 1,
						overflow: 'hidden',
						gap: 0,
					}}
				>
					<Text fz={22} className={textClasses.appName} classNames={textClasses}>
						{name}
					</Text>
					<Text
						fz={16}
						className={textClasses.appUrl}
						classNames={textClasses}
						style={{
							textDecoration: textDecoration,
						}}
					>
						{url}
					</Text>
				</Stack>
			</Box>
		</Box>
	);
}

export default AppSettingsItem;