import {
	isActionNode,
	isAppEntryNode,
	isContentGenerationNode,
	isDataQueryNode,
	isDataStoreNode,
	isEndNode,
	isFileNode,
	isImageGenerationNode,
	isQueryNode,
	isTextGenerationNode,
	isTextNode,
	isTriggerNode,
	isVectorStoreNode,
	isWebPageNode,
} from "@giselles-ai/protocol";
import clsx from "clsx/lite";
import { useShallow } from "zustand/shallow";
import {
	useAppDesignerStore,
	useSetCurrentShortcutScope,
} from "../../app-designer";
import { ActionNodePropertiesPanel } from "./action-node-properties-panel";
import { AppEntryNodePropertiesPanel } from "./app-entry-node-properties-panel";
import { DataQueryNodePropertiesPanel } from "./data-query-properties-panel";
import { DataStoreNodePropertiesPanel } from "./data-store-properties-panel";
import { EndNodePropertiesPanel } from "./end-node-properties-panel";
import { FileNodePropertiesPanel } from "./file-node-properties-panel";
import { ImageGenerationNodePropertiesPanel } from "./image-generation-node-properties-panel";
import { QueryNodePropertiesPanel } from "./query-node-properties-panel";
import { TextGenerationNodePropertiesPanel } from "./text-generation-node-properties-panel";
import { TextGenerationNodePropertiesPanelV2 } from "./text-generation-node-properties-panel-v2";
import { TextNodePropertiesPanel } from "./text-node-properties-panel";
import { TriggerNodePropertiesPanel } from "./trigger-node-properties-panel";
import { VectorStoreNodePropertiesPanel } from "./vector-store";
import { WebPageNodePropertiesPanel } from "./web-page-node-properties-panel";

export function PropertiesPanel() {
	const selectedNodes = useAppDesignerStore(
		useShallow((s) =>
			s.nodes.filter((node) => s.ui.nodeState[node.id]?.selected),
		),
	);
	const setCurrentShortcutScope = useSetCurrentShortcutScope();
	return (
		<section
			className={clsx("h-full text-inverse outline-none")}
			aria-label="Properties Panel"
			onFocus={() => setCurrentShortcutScope("properties-panel")}
			onBlur={(e) => {
				if (!e.currentTarget.contains(e.relatedTarget)) {
					setCurrentShortcutScope("canvas");
				}
			}}
			tabIndex={-1}
		>
			{isTextGenerationNode(selectedNodes[0]) && (
				<TextGenerationNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isImageGenerationNode(selectedNodes[0]) && (
				<ImageGenerationNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isTextNode(selectedNodes[0]) && (
				<TextNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isFileNode(selectedNodes[0]) && (
				<FileNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isWebPageNode(selectedNodes[0]) && (
				<WebPageNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isTriggerNode(selectedNodes[0]) && (
				<TriggerNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isActionNode(selectedNodes[0]) && (
				<ActionNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isVectorStoreNode(selectedNodes[0]) && (
				<VectorStoreNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isDataStoreNode(selectedNodes[0]) && (
				<DataStoreNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isDataQueryNode(selectedNodes[0]) && (
				<DataQueryNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isQueryNode(selectedNodes[0]) && (
				<QueryNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isAppEntryNode(selectedNodes[0]) && (
				<AppEntryNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isContentGenerationNode(selectedNodes[0]) && (
				<TextGenerationNodePropertiesPanelV2
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
			{isEndNode(selectedNodes[0]) && (
				<EndNodePropertiesPanel
					node={selectedNodes[0]}
					key={selectedNodes[0].id}
				/>
			)}
		</section>
	);
}
