import { useLocalStorage } from '@mantine/hooks';
import { appTheme } from 'contexts';
import { useAtom } from 'jotai';
import { useEffect, useState } from 'react';
import type { Location, Theme, User } from 'types';
import { useMutationAPI } from './useAPI';

export function useCommonHooks() {
	const { mutateAsync } = useMutationAPI();
	const isMobile = window.matchMedia('(max-width: 600px)').matches;
	const [theme, setTheme] = useAtom<Theme>(appTheme);
	const [themeName, setThemeName] = useLocalStorage<string>({
		key: 'theme',
		defaultValue: 'random',
	});
	const [appFilter, setAppFilter] = useLocalStorage<string[]>({
		key: 'appFilter',
		defaultValue: ['All'],
	});
	const [appSort, setAppSort] = useLocalStorage<string>({
		key: 'appSort',
		defaultValue: 'A>Z',
	});
	const [appDensity, setAppDensity] = useLocalStorage<number>({
		key: 'appDensity',
		defaultValue: 6,
	});
	const [appScale, setAppScale] = useLocalStorage<number>({
		key: 'appScale',
		defaultValue: 1,
	});
	const [bookmarkSort, setBookmarkSort] = useLocalStorage<string>({
		key: 'bookmarkSort',
		defaultValue: 'A>Z',
	});
	const [bookmarkFilter, setBookmarkFilter] = useLocalStorage<string[]>({
		key: 'bookmarkFilter',
		defaultValue: ['All'],
	});
	const [bookmarkDensity, setBookmarkDensity] = useLocalStorage<number>({
		key: 'bookmarkDensity',
		defaultValue: 6,
	});
	const [bookmarkScale, setBookmarkScale] = useLocalStorage<number>({
		key: 'bookmarkScale',
		defaultValue: 1,
	});
	const [currentTheme, setCurrentTheme] = useLocalStorage<string>({
		key: 'theme',
		defaultValue: 'random',
	});
	const [currentThemePlaylist, setCurrentThemePlaylist] = useLocalStorage<string>({
		key: 'themePlaylist',
		defaultValue: 'All',
	});
	const [defaultProviderLabel, setDefaultProviderLabel] = useLocalStorage<string>({
		key: 'providerLabel',
		defaultValue: 'Google Search',
	});
	const [defaultProviderURL, setDefaultProviderURL] = useLocalStorage<string>({
		key: 'providerURL',
		defaultValue: 'https://www.google.com/search?q=',
	});
	const [defaultProviderPrefix, setDefaultProviderPrefix] = useLocalStorage<string>({
		key: 'providerPrefix',
		defaultValue: '/g',
	});
	const [searchValue, setSearchValue] = useState('');
	const [providerLabel, setProviderLabel] = useState(defaultProviderLabel);
	const [providerURL, setProviderURL] = useState(defaultProviderURL);
	const [providerPrefix, setProviderPrefix] = useState(defaultProviderPrefix);

	useEffect(() => {
		setProviderLabel(defaultProviderLabel);
		setProviderURL(defaultProviderURL);
		setProviderPrefix(defaultProviderPrefix);
	}, [defaultProviderLabel, defaultProviderURL, defaultProviderPrefix]);

	const [currentUser, setCurrentUser] = useLocalStorage<User>({
		key: 'user',
		defaultValue: {
			firstName: 'First',
			lastName: 'Last',
			email: 'triggerUser@default.com',
			physicalAddress: '1510 Polk St, Houston, TX 77002',
		},
	});
	const [currentLocation, setCurrentLocation] = useLocalStorage<Location>({
		key: 'location',
		defaultValue: {
			office: 'HGX',
			station: 'KHOU',
			x: 65,
			y: 96,
			lat: 29.750950134386066,
			lon: -95.36220654860034,
		},
	});

	const urlPattern = new RegExp(
		'^(https?:\\/\\/)?' + // protocol
			'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
			'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
			'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
			'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
			'(\\#[-a-z\\d_]*)?$',
		'i',
	);

	const textShadowStyle =
		'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)';
	const largeTextShadowStyle =
		'3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)';

	const reorder = (list: any, startIndex: number, endIndex: number) => {
		const result = Array.from(list);
		const [removed]: any = result.splice(startIndex, 1);
		result.splice(endIndex, 0, removed);
		return result;
	};

	const handleThemeChange = (themes: Theme[], save: boolean) => {
		const enabled = themes
			.filter((t: Theme) => t.randomEnabled === 1)
			.filter((t: Theme) => t.name !== theme.name);
		if (enabled.length === 0 && currentThemePlaylist === 'All') {
			setTheme(themes[0]);
			save && setThemeName(themes[0].name);
		} else if (currentThemePlaylist === 'All') {
			const index = Math.floor(Math.random() * enabled.length);
			setTheme(enabled[index]);
			save && setThemeName(enabled[index].name);
		} else {
			const index = Math.floor(Math.random() * themes.length);
			setTheme(themes[index]);
			save && setThemeName(themes[index].name);
		}
	};

	const handleDelete = (item: any, endpoint: string) => {
		mutateAsync({ method: 'DELETE', endpoint: endpoint, body: item });
	};

	function fixDigits(k: number) {
		if (k < 10) {
			return `0${k}`;
		}
		return k;
	}

	function getObjectDiff(original: any, current: any) {
		const changes: any = {};

		// Check current object's properties
		for (const [key, value] of Object.entries(current)) {
			if (!(key in original)) {
				changes[key] = {
					oldValue: undefined,
					newValue: value,
				};
				continue;
			}

			const originalValue = original[key];
			const currentValue = value;

			// Handle different types of comparisons
			if (
				originalValue !== currentValue &&
				String(originalValue) !== String(currentValue) &&
				JSON.stringify(originalValue) !== JSON.stringify(currentValue)
			) {
				changes[key] = {
					oldValue: originalValue,
					newValue: currentValue,
				};
			}
		}

		// Check for removed properties
		for (const key of Object.keys(original)) {
			if (!(key in current)) {
				changes[key] = {
					oldValue: original[key],
					newValue: undefined,
				};
			}
		}

		return Object.keys(changes).length === 0 ? null : changes;
	}

	return {
		isMobile,
		theme,
		setTheme,
		urlPattern,
		fixDigits,
		reorder,
		getObjectDiff,
		handleThemeChange,
		handleDelete,
		themeName,
		setThemeName,
		appFilter,
		setAppFilter,
		appSort,
		setAppSort,
		appDensity,
		setAppDensity,
		appScale,
		setAppScale,
		bookmarkSort,
		setBookmarkSort,
		bookmarkFilter,
		setBookmarkFilter,
		bookmarkDensity,
		setBookmarkDensity,
		bookmarkScale,
		setBookmarkScale,
		currentTheme,
		setCurrentTheme,
		currentThemePlaylist,
		setCurrentThemePlaylist,
		searchValue,
		setSearchValue,
		providerLabel,
		setProviderLabel,
		providerURL,
		setProviderURL,
		providerPrefix,
		setProviderPrefix,
		defaultProviderLabel,
		setDefaultProviderLabel,
		defaultProviderURL,
		setDefaultProviderURL,
		defaultProviderPrefix,
		setDefaultProviderPrefix,
		currentUser,
		setCurrentUser,
		currentLocation,
		setCurrentLocation,
		textShadowStyle,
		largeTextShadowStyle,
	};
}