"use client";
import Grid from "@mui/material/Grid";
import { useState, useCallback } from "react";
import Paper from "@mui/material/Paper";
import { TFunction } from "i18next";
import { useTranslation } from "react-i18next";
import PageTitle from "../PageTitle/PageTitle";
import ProgressByClient from "./ProgressByClient";
import Tabs, { TabsProps } from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import "../../app/global.css";

const DashboardTabButton: React.FC = () => {
  const [activeTab, setActiveTab] = useState("financialSummary");
  const { t } = useTranslation("dashboard");
  const renderContent = () => {
    switch (activeTab) {
      case "financialSummary":
        return <div>Financial Summary</div>;
      case "cashFlow":
        return <div>Project Cash Flow</div>;
      case "progressByClient":
        return <ProgressByClient />;
      case "resourceUtilization":
        return <div>Project Resource Utilization</div>;
      case "staffUtilization":
        return <div>Staff Utilization</div>;
      default:
        return <div>Financial Summary</div>;
    }
  };
  const [tabIndex, setTabIndex] = useState(0);
  const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
    (_e, newValue) => {
      setTabIndex(newValue);
    },
    [],
  );
  return (
    // <Grid item sm>
    //   <div style={{marginLeft:20}}>
    //     {activeTab !== 'financialSummary' ?
    //       <button onClick={() => setActiveTab('financialSummary')}className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:40,width:250,fontSize:18}}>Financial Summary</button> :
    //       <button onClick={() => setActiveTab('financialSummary')}className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:40,width:250,fontSize:18}}>Financial Summary</button>
    //     }
    //     {activeTab !== 'cashFlow' ?
    //       <button onClick={() => setActiveTab('cashFlow')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Cash Flow</button> :
    //       <button onClick={() => setActiveTab('cashFlow')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Cash Flow</button>
    //     }
    //     {activeTab !== 'progressByClient' ?
    //       <button onClick={() => setActiveTab('progressByClient')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Resource Consumption by Client</button> :
    //       <button onClick={() => setActiveTab('progressByClient')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Resource Consumption by Client</button>
    //     }
    //     {activeTab !== 'resourceUtilization' ?
    //       <button onClick={() => setActiveTab('resourceUtilization')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Resource Utilization</button> :
    //       <button onClick={() => setActiveTab('resourceUtilization')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Resource Utilization</button>
    //     }
    //     {activeTab !== 'staffUtilization' ?
    //       <button onClick={() => setActiveTab('staffUtilization')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Staff Utilization</button> :
    //       <button onClick={() => setActiveTab('staffUtilization')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Staff Utilization</button>
    //     }
    //   </div>
    //   <div style={{marginLeft:20,marginTop:20}}>
    //     {renderContent()}
    //   </div>
    // </Grid>
    <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable">
      <Tab label="Financial Summary" />
      <Tab label="Project Cash Flow" />
      <Tab label="Project Resource Consumption by Client" />
      <Tab label="Project Resource Utilization" />
      <Tab label="Staff Utilization" />
    </Tabs>
  );
};

export default DashboardTabButton;
