import { createContext, useState, useEffect, useRef } from '@wordpress/element';
import { syncStorageUsage } from '../../utils/common';
import { decode } from 'js-base64';
export const ThemeContext = window.EDBI_ThemeContext || (window.EDBI_ThemeContext = createContext(null));

const Context = ({ children, initialSelectedItems, initialPath = '/' }) => {
	const [gridView, setGridView] = useState(true);
	const [modalOpen, setModalOpen] = useState(false);
	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
	const [hideSidebar, setHideSidebar] = useState(false);
	const [folders, setFolders] = useState([]);
	const [sortBy, setSortBy] = useState('name');
	const [sortDirection, setSortDirection] = useState('asc');
	const [refresh, setRefresh] = useState(false);
	const [isLoading, setIsLoading] = useState(true);
	const [currentPath, setCurrentPath] = useState(initialPath);
	const [previousPath, setPreviousPath] = useState(null);
	const [filterV, setFilterV] = useState(null);
	const [showUploader, setShowUploader] = useState(false);
	const [breadcrumbs, setBreadcrumbs] = useState([]);
	const [openMenu, setOpenMenu] = useState(null);
	const [selectedItem, setSelectedItem] = useState(null);
	const [menuPosition, setMenuPosition] = useState({ top: 0, left: 70 });
	const [rightClickMenu, setRightClickMenu] = useState(null);
	const [rightClickPosition, setRightClickPosition] = useState({ top: 0, left: 0 });
	const [showDetails, setShowDetails] = useState(false);
	const [detailsItem, setDetailsItem] = useState(null);
	const [bulkMode, setBulkMode] = useState(false);
	const [selectedCards, setSelectedCards] = useState([]);
	const [selectedContent, setSelectedContent] = useState([]);
	const [isFolder, setIsFolder] = useState(false);
	const [fileTypeFilter, setFileTypeFilter] = useState(null);

	const [filter, setFilter] = useState({
		by: 'name',
		direction: 'asc',
	});
	const [selectedItems, setSelectedItems] = useState(
		initialSelectedItems || { files: [], folders: [] }
	);

	// Use ref to track previous account ID without triggering re-renders
	const previousAccountIdRef = useRef(null);

	useEffect(() => {
		const refreshStorage = async () => {
			await syncStorageUsage();
		};

		refreshStorage();

		const interval = setInterval(refreshStorage, 5 * 60 * 1000);

		return () => clearInterval(interval);
	}, []);

	// Clear selected items when account is switched
	// useEffect(() => {
	// 	const handleAccountSwitched = (event) => {
	// 		const newAccount = event.detail;
	// 		if (newAccount?.id) {
	// 			const previousId = previousAccountIdRef.current;
	// 			// If account has changed, clear all selected items
	// 			if (previousId && previousId !== newAccount.id) {
	// 				setSelectedItems({ files: [], folders: [] });
	// 				setSelectedCards([]);
	// 				setSelectedContent([]);
	// 				setDetailsItem(null);
	// 				setBulkMode(false);
	// 			}
	// 			previousAccountIdRef.current = newAccount.id;
	// 		}
	// 	};

	// 	// Listen for account switch events (dispatched when user switches accounts)
	// 	window.addEventListener('edbi_account_switched', handleAccountSwitched);

	// 	// Also check on initial mount
	// 	if (window.EDBIData?.activeAccount) {
	// 		try {
	// 			const activeAccount = JSON.parse(decode(window.EDBIData.activeAccount));
	// 			if (activeAccount?.id) {
	// 				previousAccountIdRef.current = activeAccount.id;
	// 			}
	// 		} catch (error) {
	// 			console.error('Failed to parse initial active account', error);
	// 		}
	// 	}

	// 	return () => {
	// 		window.removeEventListener('edbi_account_switched', handleAccountSwitched);
	// 	};
	// }, []); // Empty dependency array - only run once on mount

	useEffect(() => {
		if (refresh) {
			syncStorageUsage();
		}
	}, [refresh]);
	// console.log('selectedItems from context', selectedItems);
	const setPath = (path) => {
		setIsLoading(true);
		setPreviousPath(currentPath);
		setCurrentPath(path);
	};

	const totalCols = 6;
	const activeCols = totalCols - (!hideSidebar ? 1 : 0) - (showDetails ? 1 : 0);

	const toggleCard = (id, item) => {

		// console.log('id', id);
		// console.log('item', item);
		setSelectedCards((prev) =>
			prev?.includes(id) ? prev?.filter((x) => x !== id) : [...prev, id]
		);

		setSelectedContent((prev) => {
			const exits = prev?.find((x) => x.id === id);
			if (exits) {
				return prev?.filter((x) => x.id !== id);
			} else {
				return [...prev, item];
			}
		});

		setSelectedItems((prev) => {
			const key = item?.mimetype ? 'files' : 'folders';
			const current = prev?.[key] ?? [];

			const exists = current?.find((x) => x.id === id);
			if (exists) {
				return {
					...prev,
					[key]: current?.filter((x) => x.id !== id),
				};
			} else {
				return {
					...prev,
					[key]: [...current, item],
				};
			}
		});
		setDetailsItem(item);
	};

	// @TODO: On refresh, we should set loading state to true.

	const theme = {
		gridView,
		setGridView,
		modalOpen,
		setModalOpen,
		isDrawerOpen,
		setIsDrawerOpen,
		hideSidebar,
		setHideSidebar,
		folders,
		setFolders,
		sortBy,
		setSortBy,
		sortDirection,
		setSortDirection,
		isLoading,
		setIsLoading,
		currentPath,
		setCurrentPath,
		previousPath,
		setPreviousPath,
		setPath,
		refresh,
		setRefresh,
		filterV,
		setFilterV,
		showUploader,
		setShowUploader,
		breadcrumbs,
		setBreadcrumbs,
		openMenu,
		setOpenMenu,
		selectedItem,
		setSelectedItem,
		menuPosition,
		setMenuPosition,
		rightClickMenu,
		setRightClickMenu,
		rightClickPosition,
		setRightClickPosition,
		showDetails,
		setShowDetails,
		detailsItem,
		setDetailsItem,
		activeCols,
		bulkMode,
		setBulkMode,
		selectedCards,
		setSelectedCards,
		toggleCard,
		isFolder,
		setIsFolder,
		filter,
		setFilter,
		selectedItems,
		setSelectedItems,
		selectedContent,
		setSelectedContent,
		fileTypeFilter,
		setFileTypeFilter,
	};

	return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
};

export default Context;