"use client";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import PageTitle from "../PageTitle/PageTitle";
import { Suspense } from "react";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { Add } from "@mui/icons-material";
import Link from "next/link";
import { t } from "i18next";
import { Modal } from "@mui/material";
import EnterTimesheetModal from "../EnterTimesheet/EnterTimesheetModal";
import EnterLeaveModal from "../EnterLeave/EnterLeaveModal";

const UserWorkspacePage: React.FC = () => {
  const [isTimeheetModalVisible, setTimeheetModalVisible] = useState(false);
  const [isLeaveModalVisible, setLeaveModalVisible] = useState(false);
  const { t } = useTranslation("home");

  const handleAddTimesheetButtonClick = () => {
    setTimeheetModalVisible(true);
  };

  const handleCloseTimesheetModal = () => {
    setTimeheetModalVisible(false);
  };

  const handleAddLeaveButtonClick = () => {
    setLeaveModalVisible(true);
  };

  const handleCloseLeaveModal = () => {
    setLeaveModalVisible(false);
  };

  return (
    <Grid container height="100vh">
      <Grid item sm>
        <PageTitle BigTitle={"User Workspace"} />
        <div>
          <Stack direction="row" justifyContent="right" flexWrap="wrap">
            <Button
              variant="contained"
              startIcon={<Add />}
              onClick={handleAddTimesheetButtonClick}
              sx={{ marginRight: "2rem" }}
            >
              Enter Timesheet
            </Button>
            <Button
              variant="contained"
              startIcon={<Add />}
              sx={{ marginRight: "2rem" }}
              // LinkComponent={Link}
              // href="/projects/create"
              onClick={handleAddLeaveButtonClick}
            >
              Record Leave
            </Button>
          </Stack>
          <Suspense> {/*fallback={<ProjectSearch.Loading />}>*/}</Suspense>
        </div>
        <EnterTimesheetModal
          isOpen={isTimeheetModalVisible}
          onClose={handleCloseTimesheetModal}
        />
        <EnterLeaveModal
          isOpen={isLeaveModalVisible}
          onClose={handleCloseLeaveModal}
        />
      </Grid>
    </Grid>
  );
};

export default UserWorkspacePage;
