import style from "./index.module.css";
import usePass from "@/hooks/usePass";
import UserResourcesEnvironment from "./UserResourcesEnvironment";
import { useMemo, useState } from "react";
import classNames from "classnames";

const tabs = [
	{
		label: "工作流模板",
		value: "template",
		id: "USERRESOURCES_TEMPLATE",
	},
	{
		label: "工作流算子",
		value: "floe",
		id: "USERRESOURCES_FLOE",
	},
	{
		label: "应用环境",
		value: "environment",
		id: "USERRESOURCES_ENVIRONMENT",
	},
];

const UserResources = () => {
	const isPass = usePass();
	const [activeTab, setActiveTab] = useState("environment");

	const renderTabs = useMemo(() => {
		return tabs.filter((tab) => isPass(tab.id));
	}, [isPass]);
	console.log(renderTabs);
	// () => {};
	return (
		<div className={style.userResources}>
			<div className={style.top}>
				<div className={style.title}>个人资源</div>
				<div className={style.line}></div>
				<div className={style.tabs}>
					{renderTabs.map((tab) => {
						return (
							<div
								className={classNames({
									[style.tab]: true,
									[style.activeTab]: activeTab === tab.value,
								})}
								onClick={() => setActiveTab(tab.value)}
								key={tab.value}
							>
								{tab.label}
							</div>
						);
					})}
				</div>
			</div>
			<div className={style.content}>
				{activeTab === "environment" && (
					<UserResourcesEnvironment></UserResourcesEnvironment>
				)}
			</div>
		</div>
	);
};

export default UserResources;
