"use client";

import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { Add } from "@mui/icons-material";
import { Typography } from "@mui/material";
import ButtonGroup from "@mui/material/ButtonGroup";
import AssignedProjects from "./AssignedProjects";
import TimesheetModal from "../TimesheetModal";
import { AssignedProject } from "@/app/api/projects";

export interface Props {
  assignedProjects: AssignedProject[];
}

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

  const handleAddTimesheetButtonClick = useCallback(() => {
    setTimeheetModalVisible(true);
  }, []);

  const handleCloseTimesheetModal = useCallback(() => {
    setTimeheetModalVisible(false);
  }, []);

  const handleAddLeaveButtonClick = useCallback(() => {
    setLeaveModalVisible(true);
  }, []);

  const handleCloseLeaveModal = useCallback(() => {
    setLeaveModalVisible(false);
  }, []);

  return (
    <>
      <Stack
        direction="row"
        justifyContent="space-between"
        flexWrap="wrap"
        rowGap={2}
      >
        <Typography variant="h4" marginInlineEnd={2}>
          {t("User Workspace")}
        </Typography>
        <Stack
          direction="row"
          justifyContent="right"
          flexWrap="wrap"
          spacing={2}
        >
          <ButtonGroup variant="contained">
            <Button startIcon={<Add />} onClick={handleAddTimesheetButtonClick}>
              {t("Enter Time")}
            </Button>
            <Button startIcon={<Add />} onClick={handleAddLeaveButtonClick}>
              {t("Record Leave")}
            </Button>
          </ButtonGroup>
        </Stack>
      </Stack>
      <TimesheetModal
        timesheetType="time"
        isOpen={isTimeheetModalVisible}
        onClose={handleCloseTimesheetModal}
        assignedProjects={assignedProjects}
      />
      <TimesheetModal
        timesheetType="leave"
        isOpen={isLeaveModalVisible}
        onClose={handleCloseLeaveModal}
        assignedProjects={assignedProjects}
      />
      <AssignedProjects assignedProjects={assignedProjects} />
    </>
  );
};

export default UserWorkspacePage;