"use client";

import Check from "@mui/icons-material/Check";
import Close from "@mui/icons-material/Close";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import Tab from "@mui/material/Tab";
import Tabs, { TabsProps } from "@mui/material/Tabs";
import { useRouter } from "next/navigation";
import React, { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import ProjectClientDetails from "./ProjectClientDetails";
import TaskSetup from "./TaskSetup";

const CreateProject: React.FC = () => {
  const [tabIndex, setTabIndex] = useState(0);
  const { t } = useTranslation();
  const router = useRouter();

  const handleCancel = () => {
    router.back();
  };

  const handleTabChange = useCallback<NonNullable<TabsProps["onChange"]>>(
    (_e, newValue) => {
      setTabIndex(newValue);
    },
    [],
  );

  return (
    <>
      <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable">
        <Tab label={t("Project and Client Details")} />
        <Tab label={t("Project Task Setup")} />
        <Tab label={t("Staff Allocation")} />
        <Tab label={t("Resource and Milestone")} />
      </Tabs>
      {tabIndex === 0 && <ProjectClientDetails />}
      {tabIndex === 1 && <TaskSetup />}
      <Stack direction="row" justifyContent="flex-end" gap={1}>
        <Button variant="outlined" startIcon={<Close />} onClick={handleCancel}>
          {t("Cancel")}
        </Button>
        <Button variant="contained" startIcon={<Check />}>
          {t("Confirm")}
        </Button>
      </Stack>
    </>
  );
};

export default CreateProject;