import { tick } from "svelte";
import { SvelteMap } from "svelte/reactivity";
import { writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import { downloadFile, downloadFileBlob, upload } from "/src/utility-functions/files";
import { rasterizeSVG } from "/src/utility-functions/rasterization";
import { patchLayout } from "/src/utility-functions/widgets";
import type { EditorWrapper, DocumentInfo, LayerPanelEntry, LayerStructureEntry, Layout, WorkspacePanelLayout } from "/wrapper/pkg/graphite_wasm_wrapper";

export type PortfolioStore = ReturnType<typeof createPortfolioStore>;

type PortfolioStoreState = {
	unsaved: boolean;
	documents: DocumentInfo[];
	activeDocumentIndex: number;
	panelLayout: WorkspacePanelLayout;
	welcomeScreenButtonsLayout: Layout;
	propertiesPanelLayout: Layout;
	dataPanelLayout: Layout;
	layersPanelControlBarLeftLayout: Layout;
	layersPanelControlBarRightLayout: Layout;
	layersPanelBottomBarLayout: Layout;
	layerCache: SvelteMap<string, LayerPanelEntry>;
	layerStructure: LayerStructureEntry[];
};
const initialState: PortfolioStoreState = {
	unsaved: false,
	documents: [],
	activeDocumentIndex: 0,
	panelLayout: {},
	welcomeScreenButtonsLayout: [],
	propertiesPanelLayout: [],
	dataPanelLayout: [],
	layersPanelControlBarLeftLayout: [],
	layersPanelControlBarRightLayout: [],
	layersPanelBottomBarLayout: [],
	layerCache: new SvelteMap<string, LayerPanelEntry>(),
	layerStructure: [],
};

let subscriptionsRouter: SubscriptionsRouter | undefined = undefined;

// Store state persisted across HMR to maintain reactive subscriptions in the component tree
const store: Writable<PortfolioStoreState> = import.meta.hot?.data?.store || writable<PortfolioStoreState>(initialState);
if (import.meta.hot) import.meta.hot.data.store = store;
const { subscribe, update } = store;

export function createPortfolioStore(subscriptions: SubscriptionsRouter, editor: EditorWrapper) {
	destroyPortfolioStore();

	subscriptionsRouter = subscriptions;

	subscriptions.subscribeFrontendMessage("UpdateOpenDocumentsList", (data) => {
		update((state) => {
			state.documents = data.openDocuments;
			return state;
		});
	});

	subscriptions.subscribeFrontendMessage("UpdateActiveDocument", (data) => {
		update((state) => {
			// Assume we receive a correct document id
			const activeId = state.documents.findIndex((doc) => doc.id === data.documentId);
			state.activeDocumentIndex = activeId;
			return state;
		});
	});

	subscriptions.subscribeFrontendMessage("TriggerFetchAndOpenDocument", async (data) => {
		try {
			const url = new URL(`demo-artwork/${data.filename}`, document.location.href);
			const response = await fetch(url);
			editor.openFile(data.filename, await response.bytes());
		} catch {
			// Needs to be delayed until the end of the current call stack so the existing demo artwork dialog can be closed first, otherwise this dialog won't show
			setTimeout(() => {
				editor.errorDialog("Failed to open document", "The file could not be reached over the internet. You may be offline, or it may be missing.");
			}, 0);
		}
	});

	subscriptions.subscribeFrontendMessage("TriggerOpen", async () => {
		const data = await upload(`image/*,.${editor.fileExtension()}`, "data");
		editor.openFile(data.filename, data.content);
	});

	subscriptions.subscribeFrontendMessage("TriggerImport", async () => {
		// TODO: Use the same `accept` string as in the `TriggerOpen` handler once importing Graphite documents as nodes is supported
		const data = await upload("image/*", "data");
		editor.importFile(data.filename, data.content);
	});

	subscriptions.subscribeFrontendMessage("TriggerSaveDocument", (data) => {
		downloadFile(data.name, data.content);
	});

	subscriptions.subscribeFrontendMessage("TriggerSaveFile", (data) => {
		downloadFile(data.name, data.content);
	});

	subscriptions.subscribeFrontendMessage("TriggerExportImage", async (data) => {
		const { svg, name, mime, size } = data;

		// Fill the canvas with white if it'll be a JPEG (which does not support transparency and defaults to black)
		const backgroundColor = mime.endsWith("jpeg") ? "white" : undefined;

		// Rasterize the SVG to an image file
		try {
			const blob = await rasterizeSVG(svg, size[0], size[1], mime, backgroundColor);

			// Have the browser download the file to the user's disk
			downloadFileBlob(name, blob);
		} catch {
			// Fail silently if there's an error rasterizing the SVG, such as a zero-sized image
		}
	});

	subscriptions.subscribeFrontendMessage("UpdateWorkspacePanelLayout", (data) => {
		update((state) => {
			state.panelLayout = data.panelLayout;
			return state;
		});
	});

	// All panel layouts below live in this store so panels that remount during a panel-tree change keep their contents
	subscriptions.subscribeLayoutUpdate("WelcomeScreenButtons", async (data) => {
		await tick();
		update((state) => {
			patchLayout(state.welcomeScreenButtonsLayout, data);
			return state;
		});
	});

	subscriptions.subscribeLayoutUpdate("PropertiesPanel", async (data) => {
		await tick();
		update((state) => {
			patchLayout(state.propertiesPanelLayout, data);
			return state;
		});
	});

	subscriptions.subscribeLayoutUpdate("DataPanel", async (data) => {
		await tick();
		update((state) => {
			patchLayout(state.dataPanelLayout, data);
			return state;
		});
	});

	subscriptions.subscribeLayoutUpdate("LayersPanelControlLeftBar", async (data) => {
		await tick();
		update((state) => {
			patchLayout(state.layersPanelControlBarLeftLayout, data);
			return state;
		});
	});

	subscriptions.subscribeLayoutUpdate("LayersPanelControlRightBar", async (data) => {
		await tick();
		update((state) => {
			patchLayout(state.layersPanelControlBarRightLayout, data);
			return state;
		});
	});

	subscriptions.subscribeLayoutUpdate("LayersPanelBottomBar", async (data) => {
		await tick();
		update((state) => {
			patchLayout(state.layersPanelBottomBarLayout, data);
			return state;
		});
	});

	subscriptions.subscribeFrontendMessage("UpdateDocumentLayerStructure", (data) => {
		update((state) => {
			state.layerStructure = data.layerStructure;
			return state;
		});
	});

	subscriptions.subscribeFrontendMessage("UpdateDocumentLayerDetails", (data) => {
		update((state) => {
			state.layerCache.set(String(data.data.id), data.data);
			return state;
		});
	});

	return { subscribe };
}

export function destroyPortfolioStore() {
	const subscriptions = subscriptionsRouter;
	if (!subscriptions) return;

	subscriptions.unsubscribeFrontendMessage("UpdateOpenDocumentsList");
	subscriptions.unsubscribeFrontendMessage("UpdateActiveDocument");
	subscriptions.unsubscribeFrontendMessage("TriggerFetchAndOpenDocument");
	subscriptions.unsubscribeFrontendMessage("TriggerOpen");
	subscriptions.unsubscribeFrontendMessage("TriggerImport");
	subscriptions.unsubscribeFrontendMessage("TriggerSaveDocument");
	subscriptions.unsubscribeFrontendMessage("TriggerSaveFile");
	subscriptions.unsubscribeFrontendMessage("TriggerExportImage");
	subscriptions.unsubscribeFrontendMessage("UpdateWorkspacePanelLayout");
	subscriptions.unsubscribeLayoutUpdate("WelcomeScreenButtons");
	subscriptions.unsubscribeLayoutUpdate("PropertiesPanel");
	subscriptions.unsubscribeLayoutUpdate("DataPanel");
	subscriptions.unsubscribeLayoutUpdate("LayersPanelControlLeftBar");
	subscriptions.unsubscribeLayoutUpdate("LayersPanelControlRightBar");
	subscriptions.unsubscribeLayoutUpdate("LayersPanelBottomBar");
	subscriptions.unsubscribeFrontendMessage("UpdateDocumentLayerStructure");
	subscriptions.unsubscribeFrontendMessage("UpdateDocumentLayerDetails");
}