import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import {
	Box,
	Button,
	type ComboboxItem,
	type ComboboxLikeRenderOptionInput,
	Grid,
	GridCol,
	Group,
	Popover,
	Select,
	Stack,
	Text,
	TextInput,
} from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AppItem } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import * as fa6 from 'react-icons/fa6';
import * as si from 'react-icons/si';
import * as vsc from 'react-icons/vsc';
import { popoverClasses, selectClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import DebouncedApplication from './DebouncedApplication';

const ApplicationSettings = () => {
	const allIcons: any = { ...fa6, ...vsc, ...si };
	const defaultApplication: Application = {
		id: null,
		name: '',
		url: '',
		icon: '',
		baseUrl: '',
		filterName: 'Default',
		index: 0,
		enabled: 1,
	};
	const form = useForm({
		initialValues: defaultApplication,
		validate: {
			name: isNotEmpty('Name is required'),
			url: isNotEmpty('URL is required'),
			icon: isNotEmpty('Icon is required'),
			filterName: isNotEmpty('Filter name is required'),
		},
	});
	const appsEndpoint = 'api/applications';
	const appsOrderEndpoint = 'api/applicationOrder';
	const { data: applicationData, isFetching: isAppsFetching } = useQueryAPI({
		endpoint: appsEndpoint,
	});
	const [applications, setApplications] = useState<Application[]>([]);
	const [applicationList, setApplicationList] = useState<Application[]>([]);
	const { isMobile, reorder } = useCommonHooks();
	const { mutateAsync } = useMutationAPI();
	const [searchValue, setSearchValue] = useState('');
	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
	const [dragging, setDragging] = useState(false);
	const [isOpen, setIsOpen] = useState(false);
	const [isLoading, setIsLoading] = useState(false);

	function onDragEnd(result: any) {
		if (!result.destination) {
			return;
		}

		if (result.destination.index === result.source.index) {
			return;
		}

		const items = reorder(applications, result.source.index, result.destination.index);
		setApplicationList(
			items.map((item: any, index: number) => {
				return {
					...item,
					index: index,
				};
			}),
		);
	}

	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);

	const handleClose = () => {
		closeModal();
		form.reset();
	};
	useEffect(() => {
		if (applicationData && !isAppsFetching) {
			setApplications(
				applicationData
					.filter(
						(a: Application) =>
							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
							a.url.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
							a.baseUrl.toLowerCase().includes(debouncedSearch.toLowerCase()),
					)
					.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
			);
		}
		if (debouncedSearch === searchValue) {
			setIsLoading(false);
		}
	}, [applicationData, isAppsFetching, debouncedSearch]);

	useEffect(() => {
		if (applicationList.length > 0 && applicationList !== applications) {
			mutateAsync({
				method: 'PATCH',
				endpoint: appsOrderEndpoint,
				body: applicationList,
			});
		}
	}, [applicationList]);
	return (
		<Stack>
			<SettingsHeader
				setDragging={applications.length > 0 ? setDragging : undefined}
				openModal={openModal}
				title={'Applications'}
				tooltip={{
					title:
						'Applications are the app buttons that will be displayed on the homepage.',
					highlightList: [
						'Applications',
						'applicationData',
						'application',
						'app',
						'apps',
						'name',
						'base url',
						'url',
						'icon',
						'filter',
					],
					description:
						'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
				}}
				searchValue={searchValue}
				setSearchValue={setSearchValue}
				searchPlaceholder={'Search Applications...'}
				isLoading={isLoading}
				setIsLoading={setIsLoading}
			/>
			<AddItemModal
				modalOpened={modalOpened}
				handleClose={handleClose}
				title={'Add a new application'}
				body={
					<form
						onSubmit={form.onSubmit((values) => {
							mutateAsync({
								method: 'POST',
								endpoint: appsEndpoint,
								body: {
									...values,
									index: applications.length,
								},
							});
							handleClose();
						})}
					>
						<Stack gap={0} align='center'>
							<Group w={'100%'} justify='center'>
								<TextInput
									key={form.key('name')}
									{...form.getInputProps('name')}
									label={'Name'}
									placeholder='eg. Nextcloud'
									className={textInputClasses.settingsItem}
									w={'45%'}
									classNames={textInputClasses}
									withAsterisk
								/>
								<TextInput
									key={form.key('baseUrl')}
									{...form.getInputProps('baseUrl')}
									label={'Base URL'}
									placeholder='eg. /nextcloud'
									className={textInputClasses.settingsItem}
									w={'45%'}
									classNames={textInputClasses}
								/>
							</Group>
							<Group w={isMobile ? '94%' : '92%'} justify='center'>
								<TextInput
									key={form.key('url')}
									{...form.getInputProps('url')}
									label={'URL'}
									placeholder='eg. https://domain.example.com/nextcloud'
									className={textInputClasses.settingsItem}
									w={'100%'}
									classNames={textInputClasses}
									withAsterisk
								/>
							</Group>
							<Group w={'100%'} justify='center' pos={'relative'}>
								<Select
									key={form.key('icon')}
									{...form.getInputProps('icon')}
									label={'Icon'}
									className={selectClasses.settingsItem}
									classNames={{
										input: selectClasses.menuSelectInput,
										label: selectClasses.menuSelectLabel,
										options: selectClasses.menuSelectOptions,
										option: selectClasses.menuSelectOption,
										dropdown: selectClasses.dropdown,
									}}
									w={'45%'}
									mt={'.75rem'}
									limit={100}
									placeholder='Search for an icon...'
									data={Object.keys(allIcons).map((icon) => {
										return { value: icon, label: icon };
									})}
									comboboxProps={{
										zIndex: 3000,
									}}
									renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
										const Icon = allIcons[item.option.value];
										return (
											<Group>
												{item.option.value}
												<Icon />
											</Group>
										);
									}}
									searchable
									maxDropdownHeight={175}
									onDropdownOpen={() => setIsOpen(true)}
									onDropdownClose={() => setIsOpen(false)}
									withAsterisk
								/>
								<TextInput
									key={form.key('filter')}
									{...form.getInputProps('filter')}
									label={'Filter'}
									placeholder='eg. Storage'
									className={textInputClasses.settingsItem}
									pt={'1rem'}
									w={'45%'}
									classNames={textInputClasses}
									defaultValue={defaultApplication.filterName}
									withAsterisk
								/>
							</Group>
							<Group mt={'1rem'}>
								<Button type='submit' color={'green'}>
									Save
								</Button>
								<Button
									color={'red'}
									styles={{ label: { color: 'black' } }}
									onClick={handleClose}
								>
									Cancel
								</Button>
							</Group>
						</Stack>
					</form>
				}
			/>
			<DragDropContext onDragEnd={onDragEnd}>
				<Stack
					mt={isMobile ? '10rem' : '6rem'}
					mb={isMobile ? '6rem' : '1rem'}
					align='center'
				>
					{applications.length > 0 ? (
						<Droppable droppableId={'groupList'}>
							{(provided) => (
								<Grid
									columns={18}
									w={dragging ? '30%' : '75%'}
									ref={provided.innerRef}
									{...provided.droppableProps}
								>
									{applications?.map((application: Application, index: number) => (
										<GridCol span={dragging ? 18 : 6} key={application.id}>
											{dragging ? (
												<Draggable
													key={application.id}
													draggableId={`${application.id}`}
													index={Number(application.index)}
												>
													{(provided) => (
														<Box
															ref={provided.innerRef}
															{...provided.draggableProps}
															{...provided.dragHandleProps}
														>
															<Box pos={'relative'} h={'100%'}>
																<Text
																	style={{
																		color: 'var(--mantine-color-primary-0)',
																		zIndex: 1,
																		position: 'absolute',
																		right: 4,
																		bottom: 0,
																	}}
																>
																	#{index + 1}
																</Text>
																<AppItem
																	key={application.name}
																	name={application.name}
																	url={application.url}
																	icon={application.icon}
																	enabled={application.enabled}
																	scale={2}
																	linksActive={false}
																/>
															</Box>
														</Box>
													)}
												</Draggable>
											) : (
												<Popover
													withArrow
													withOverlay
													trapFocus
													closeOnClickOutside={!isOpen}
													classNames={popoverClasses}
													middlewares={{ shift: { padding: 20 } }}
													position='bottom'
													offset={isMobile ? -100 : 0}
												>
													<Popover.Target>
														<Box
															onClick={(e) => {
																e.stopPropagation();
															}}
														>
															<AppItem
																key={application.name}
																name={application.name}
																url={application.url}
																icon={application.icon}
																enabled={application.enabled}
																scale={2}
																linksActive={false}
															/>
														</Box>
													</Popover.Target>
													<Popover.Dropdown w={isMobile ? '90%' : undefined}>
														<DebouncedApplication
															application={application}
															setIsOpen={setIsOpen}
															allIcons={allIcons}
														/>
													</Popover.Dropdown>
												</Popover>
											)}
										</GridCol>
									))}
									{provided.placeholder}
								</Grid>
							)}
						</Droppable>
					) : (
						<NoItemsFound />
					)}
				</Stack>
			</DragDropContext>
		</Stack>
	);
};
export default ApplicationSettings;