"use client";

import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import FormControl from "@mui/material/FormControl";
import Grid from "@mui/material/Grid";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import { InvoiceResult } from "@/app/api/invoices";
import { useFormContext } from "react-hook-form";
import { timestampToDateString } from "@/app/utils/formatUtil";

interface Props {
  projectDetails: InvoiceResult
}

const ProjectDetails: React.FC<Props> = ({
  projectDetails,
}) => {
  const { t } = useTranslation();
  const {
    register,
    formState: { errors },
    control,
    setValue, 
    getValues,
  } = useFormContext<InvoiceResult>();

  return (
    <Card>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Project Details")}
          </Typography>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
          <Grid item xs={6}>
              <TextField
                label={t("Poject code")}
                fullWidth
                disabled
                defaultValue={projectDetails.projectCode}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Project name")}
                fullWidth
                disabled
                defaultValue={projectDetails.projectName}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Stage")}
                fullWidth
                disabled
                defaultValue={projectDetails.stage}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Payment milestone date")}
                fullWidth
                disabled
                defaultValue={projectDetails.paymentMilestoneDate}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Coming payment milestone")}
                fullWidth
                disabled
                defaultValue={projectDetails.comingPaymentMileStone}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Unbilled Hours")}
                fullWidth
                disabled
                defaultValue={projectDetails.unbilledHours}
              />
            </Grid>
          </Grid>
        </Box>
        {/* <CardActions sx={{ justifyContent: "flex-end" }}>
          <Button variant="text" startIcon={<RestartAlt />}>
            {t("Reset")}
          </Button>
        </CardActions> */}
      </CardContent>
    </Card>
  );
};

export default ProjectDetails;