"use client";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import { TFunction } from "i18next";
import { useTranslation } from "react-i18next";
import PageTitle from "../PageTitle/PageTitle";
import DashboardTabButton from "./DashboardTabButton";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../../theme";
import Tabs, { TabsProps } from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import React, { useCallback, useState } from "react";
import { useRouter } from "next/navigation";
import ProgressByClient from "./ProgressByClient";
import ProgressByClientSearch from "@/components/ProgressByClientSearch";
import { Suspense } from "react";
import { getSession } from "next-auth/react";

type Props = {
  abilities: string[]
}
const DashboardPage: React.FC<Props> = ({
  abilities
}) => {
  const [tabIndex, setTabIndex] = useState(0);
  const { t } = useTranslation("dashboard");
  const router = useRouter();
  window.localStorage.setItem("abilities", JSON.stringify(abilities))

  const handleCancel = () => {
    router.back();
  };
  const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
    (_e, newValue) => {
      setTabIndex(newValue);
    },
    [],
  );
  return (
    <ThemeProvider theme={theme}>
      <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable">
        <Tab label="Project Financial Summary" />
        {/* <Tab label="Project Cash Flow" />
        <Tab label="Project Progress by Client" />
        <Tab label="Project Resource Utilization" />
        <Tab label="Staff Utilization" /> */}
      </Tabs>
      {tabIndex === 2 && <ProgressByClient />}
      {/* <Grid container height="100vh" style={{ backgroundColor: theme.palette.background.default}}>
      <Grid item sm>
        <PageTitle BigTitle={"Dashboards"}/>
        <DashboardTabButton/>
      </Grid>
    </Grid> */}
    </ThemeProvider>
  );
};

export default DashboardPage;