'use client';


import { cn } from "../../utils/cn.mjs";
import { Container } from "../Container/index.mjs";
import { FileTree } from "./FileTree.mjs";
import { WithResizer } from "../WithResizer/index.mjs";
import { MarkdownRenderer } from "./MarkDownRender.mjs";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/IDE/IDE.tsx
const IDE = ({ pages: initialPages, isDarkMode, className, activeTab: defaultActiveTab,...props }) => {
	const [pages, setPages] = useState(initialPages);
	const tabs = pages.filter(({ isOpen }) => isOpen);
	const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);
	const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);
	useEffect(() => {
		setActiveTab(defaultActiveTab ?? firstTabIndex);
	}, [initialPages, defaultActiveTab]);
	const { content, path } = pages[activeTab];
	const filePaths = initialPages.map(({ path: title }) => title);
	const handleClickFile = (title) => {
		if (!pages.find(({ path: tabTitle }) => tabTitle === title)) return;
		const newPages = pages.map((page) => {
			if (page.path === title) return {
				...page,
				isOpen: true
			};
			return page;
		});
		setPages(newPages);
		setActiveTab(newPages.findIndex(({ path: tabTitle }) => tabTitle === title));
	};
	return /* @__PURE__ */ jsxs(Container, {
		className: cn("flex size-full flex-col justify-start overflow-hidden shadow-lg", className),
		roundedSize: "3xl",
		transparency: "none",
		...props,
		children: [/* @__PURE__ */ jsxs("div", {
			className: "flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950",
			children: [/* @__PURE__ */ jsxs("div", {
				className: "mx-2 flex items-center justify-start gap-2 p-1",
				children: [
					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
					/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
				]
			}), /* @__PURE__ */ jsx("div", {
				className: "flex size-full overflow-y-auto",
				children: tabs.map(({ path: path$1 }, index) => {
					const fullPath = path$1.split("/");
					const title = fullPath[fullPath.length - 1];
					return /* @__PURE__ */ jsx("button", {
						className: cn("flex h-8 min-w-20 items-center justify-start px-3 py-1 transition", index === activeTab ? "bg-card" : "cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950"),
						onClick: () => setActiveTab(index),
						children: title
					}, title);
				})
			})]
		}), /* @__PURE__ */ jsx("div", {
			className: "relative flex size-full flex-1 flex-row justify-start",
			children: /* @__PURE__ */ jsx("div", {
				className: "absolute top-0 left-0 size-full",
				children: /* @__PURE__ */ jsxs("div", {
					className: "flex size-full",
					children: [/* @__PURE__ */ jsx(WithResizer, {
						initialWidth: 150,
						children: /* @__PURE__ */ jsx(FileTree, {
							filesPaths: filePaths,
							activeFile: path,
							onClickFile: handleClickFile
						})
					}), /* @__PURE__ */ jsx("div", {
						className: "size-full flex-1 overflow-auto pt-2 text-xs",
						children: /* @__PURE__ */ jsx(MarkdownRenderer, {
							isDarkMode,
							children: content
						})
					})]
				})
			})
		})]
	});
};

//#endregion
export { IDE };
//# sourceMappingURL=IDE.mjs.map