<template>
	<h1>
		<router-link :to="assetsRoute">Import Assets</router-link>
		<span> / Supported Files</span>
	</h1>
	<div class="Docs-Page-Supported-Files">
		<p>Here is the list of supported extensions as well as which node can be used to import those files:</p>
		<table class="list-none">
			<thead>
				<td>Extension</td>
				<td>Nodes</td>
			</thead>
			<tr v-for="(extension, i) in extensions" class="group my-1">
				<td class="group-hover:bg-gray-900">.{{ extension }}</td>
				<td class="group-hover:bg-gray-900">
					<router-link class="mr-2" v-for="(route, j) in nodesRoutesForExtensions[i]" :to="route"
						>{{ nodeLinkLabelsForExtensions[i][j] }}
					</router-link>
				</td>
			</tr>
		</table>
		<p>Here is the inverted list, which is the extension that a specific node can import:</p>
		<table class="list-none">
			<thead>
				<td>Nodes</td>
				<td>Extensions</td>
			</thead>
			<tr v-for="(_, i) in nodes" class="my-1 group">
				<td class="group-hover:bg-gray-900">
					<router-link class="mr-2" :to="nodeRoutes[i]">{{ nodeLabels[i] }}</router-link>
				</td>
				<td class="group-hover:bg-gray-900">
					<span class="mr-2" v-for="extension in extensionsForNode[i]">.{{ extension }}</span>
				</td>
			</tr>
		</table>

		<h2>What's next?</h2>
		<p>Let's see <DocRouterLink bang :href="nextRoute" innerText="how the editor works &rarr;"></DocRouterLink></p>
	</div>
</template>

<script lang="ts">
import {defineComponent, computed} from 'vue';
import {NodeContext} from '../../../../../@polygonjs/polygonjs/src/engine/poly/NodeContext';
import {MapUtils} from '../../../../../@polygonjs/polygonjs/src/core/MapUtils';
import {docsNode, docsRoute} from '../../../../routes';
import {DocsRoute} from '../../../../docs/pages/Pages';
import DocRouterLink from '../../../../docs/components/DocRouterLink.vue';
// import {getRegisteredNodes,NodesByContextRecord,createNodesByContextRecord} from '../../../nodes/Common';

import {EXTENSIONS_BY_NODE_TYPE_BY_CONTEXT} from '../../../../../@polygonjs/polygonjs/src/core/loader/FileExtensionRegister';

interface NodeData {
	context: NodeContext;
	type: string;
}

function _buildMaps() {
	const nodesByExtension: Map<string, Set<NodeData>> = new Map();
	const extensionsByNode: Map<NodeData, Set<string>> = new Map();
	const contexts = Object.keys(EXTENSIONS_BY_NODE_TYPE_BY_CONTEXT) as NodeContext[];
	for (const context of contexts) {
		const extensionsByNodeType = EXTENSIONS_BY_NODE_TYPE_BY_CONTEXT[context];
		const nodeTypes = Object.keys(extensionsByNodeType);
		for (const nodeType of nodeTypes) {
			const nodeData: NodeData = {context, type: nodeType};
			const extensions = extensionsByNodeType[nodeType];
			for (const extension of extensions) {
				MapUtils.addToSetAtEntry(nodesByExtension, extension, nodeData);
				MapUtils.addToSetAtEntry(extensionsByNode, nodeData, extension);
			}
		}
	}
	return {nodesByExtension, extensionsByNode};
}

const {nodesByExtension, extensionsByNode} = _buildMaps();

const nodeRoute = (nodeData: NodeData) => docsNode(nodeData.context, nodeData.type);
const nodeLabel = (nodeData: NodeData) => `${nodeData.context}/${nodeData.type}`;

export default defineComponent({
	name: 'docs-page-assets-supported-files',
	components: {DocRouterLink},

	setup(props) {
		const extensions = computed(() => {
			const list: string[] = [];
			nodesByExtension.forEach((nodeData, ext) => {
				list.push(ext);
			});
			return list.sort();
		});
		const nodesForExtensions = computed(() => {
			const list: NodeData[][] = [];
			extensions.value.forEach((ext) => {
				const _nodeDatas = nodesByExtension.get(ext);
				if (_nodeDatas) {
					const nodeDatas: NodeData[] = [];
					_nodeDatas.forEach((_nodeData) => nodeDatas.push(_nodeData));
					list.push(nodeDatas);
				}
			});
			return list;
		});
		const nodesRoutesForExtensions = computed(() => {
			const list: string[][] = [];
			nodesForExtensions.value.forEach((nodeDatas) => {
				const routes = nodeDatas.map(nodeRoute);
				list.push(routes);
			});
			return list;
		});
		const nodeLinkLabelsForExtensions = computed(() => {
			const list: string[][] = [];
			nodesForExtensions.value.forEach((nodeDatas) => {
				const routes = nodeDatas.map(nodeLabel);
				list.push(routes);
			});
			return list;
		});
		const nodes = computed(() => {
			const list: NodeData[] = [];
			extensionsByNode.forEach((extensions, nodeData) => {
				list.push(nodeData);
			});
			return list.sort();
		});
		const nodeRoutes = computed(() => nodes.value.map(nodeRoute));
		const nodeLabels = computed(() => nodes.value.map(nodeLabel));
		const extensionsForNode = computed(() => {
			return nodes.value.map((nodeData) => {
				const extensions = extensionsByNode.get(nodeData);
				if (extensions) {
					const list: string[] = [];
					extensions.forEach((ext) => list.push(ext));
					return list.sort();
				}
			});
		});
		const assetsRoute = computed(() => docsRoute(DocsRoute.ASSETS_INDEX));
		// const nodeContexts: Ref<NodeContext[]> = ref([]);
		// const nodeTypesByContext: Ref<NodesByContextRecord> = ref(createNodesByContextRecord());

		// onMounted(loadRegisteredNodes);
		// async function loadRegisteredNodes() {
		// 	await getRegisteredNodes({
		// 		nodeContexts: [],
		// 		nodeTypesByContext: nodeTypesByContext.value,
		// 	});

		// 	for(const nodeContext of nodeContexts.value){
		// 		const nodeTypesForContext = nodeTypesByContext.value[nodeContext]
		// 		for(const nodeType of nodeTypesForContext){
		// 			const params = node
		// 		}
		// 	}
		// }
		const nextRoute = computed(() => docsRoute(DocsRoute.EDITOR));

		return {
			assetsRoute,
			nextRoute,
			extensions,
			nodesByExtension,
			nodesForExtensions,
			nodesRoutesForExtensions,
			nodeLinkLabelsForExtensions,
			nodes,
			nodeRoutes,
			nodeLabels,
			extensionsForNode,
		};
	},
});
</script>
<style lang="sass">
.Docs-Page-Supported-Files
	thead,
	tbody,
	tfoot,td
		background-color: black
	th, td
		padding: 0rem
		padding-left: 1rem
</style>
