TabsAsideExtension/entrypoints/sidepanel/contexts/CollectionsProvider.tsx

import { CloudStorageIssueType, getCollections, graphics as graphicsStorage, saveCollections } from "@/features/collectionStorage";
import useSettings from "@/hooks/useSettings";
import { CollectionItem, GraphicsStorage, GroupItem } from "@/models/CollectionModels";
import getLogger from "@/utils/getLogger";
import { onMessage, sendMessage } from "@/utils/messaging";
import { createContext } from "react";
import mergePinnedGroups from "../utils/mergePinnedGroups";

const logger = getLogger("CollectionsProvider");

const CollectionsContext = createContext<CollectionsContextType>(null!);

export const useCollections = () => useContext<CollectionsContextType>(CollectionsContext);

export default function CollectionsProvider({ children }: React.PropsWithChildren): React.ReactElement
{
	const [collections, setCollections] = useState<CollectionItem[]>(null!);
	const [cloudIssue, setCloudIssue] = useState<CloudStorageIssueType | null>(null);
	const [graphics, setGraphics] = useState<GraphicsStorage>({});
	const [tilesView] = useSettings("tilesView");

	useEffect(() =>
	{
		refreshCollections();
		onMessage("refreshCollections", refreshCollections);
	}, []);

	const refreshCollections = async (): Promise<void> =>
	{
		const [result, issues] = await getCollections();
		setCloudIssue(issues);
		setCollections(result);
		setGraphics(await graphicsStorage.getValue());
	};

	const updateStorage = async (collectionList: CollectionItem[]): Promise<void> =>
	{
		logger("save");
		collectionList.forEach(mergePinnedGroups);
		setCollections([...collectionList]);
		await saveCollections(collectionList, cloudIssue === null);
		setGraphics(await graphicsStorage.getValue());
		sendMessage("refreshCollections", undefined);
	};

	const addCollection = async (collection: CollectionItem): Promise<void> =>
	{
		// TEMP
		// await updateStorage([collection, ...collections]);
		const items: CollectionItem[] = [];

		for (let i = 0; i < 128; i++)
			items.push({
				title: i.toString(),
				items: [
					{
						type: "tab",
						title: "Google",
						url: "https://www.google.com"
					},
					{
						type: "group",
						title: "Group",
						color: "blue",
						items: [
							{
								type: "tab",
								title: "Facebook",
								url: "https://www.facebook.com"
							}
						]
					}
				],
				timestamp: Date.now() + i,
				type: "collection"
			});

		await updateStorage(items);
	};

	const removeItem = async (...indices: number[]): Promise<void> =>
	{
		const collectionIndex: number = collections.findIndex(i => i.timestamp === indices[0]);

		if (indices.length > 2)
			(collections[collectionIndex].items[indices[1]] as GroupItem).items.splice(indices[2], 1);
		else if (indices.length > 1)
			collections[collectionIndex].items.splice(indices[1], 1);
		else
			collections.splice(collectionIndex, 1);

		await updateStorage(collections);
	};

	const updateCollections = async (collectionList: CollectionItem[]): Promise<void> =>
	{
		await updateStorage(collectionList);
	};

	const updateCollection = async (collection: CollectionItem, id: number): Promise<void> =>
	{
		const index: number = collections.findIndex(i => i.timestamp === id);
		collections[index] = collection;
		await updateStorage(collections);
	};

	const updateGroup = async (group: GroupItem, collectionId: number, groupIndex: number): Promise<void> =>
	{
		const collectionIndex: number = collections.findIndex(i => i.timestamp === collectionId);
		collections[collectionIndex].items[groupIndex] = group;
		await updateStorage(collections);
	};

	const ungroup = async (collectionId: number, groupIndex: number): Promise<void> =>
	{
		const collectionIndex: number = collections.findIndex(i => i.timestamp === collectionId);
		const group = collections[collectionIndex].items[groupIndex] as GroupItem;
		collections[collectionIndex].items.splice(groupIndex, 1, ...group.items);
		await updateStorage(collections);
	};

	return (
		<CollectionsContext.Provider
			value={ {
				collections, cloudIssue, graphics, tilesView: tilesView!,
				refreshCollections, removeItem, ungroup,
				updateCollections, updateCollection, updateGroup, addCollection
			} }
		>
			{ children }
		</CollectionsContext.Provider>
	);
}

export type CollectionsContextType =
	{
		collections: CollectionItem[] | null;
		cloudIssue: CloudStorageIssueType | null;
		graphics: GraphicsStorage;
		tilesView: boolean;

		refreshCollections: () => Promise<void>;
		addCollection: (collection: CollectionItem) => Promise<void>;

		updateCollections: (collections: CollectionItem[]) => Promise<void>;
		updateCollection: (collection: CollectionItem, id: number) => Promise<void>;
		updateGroup: (group: GroupItem, collectionId: number, groupIndex: number) => Promise<void>;
		ungroup: (collectionId: number, groupIndex: number) => Promise<void>;

		removeItem: (...indices: number[]) => Promise<void>;
	};