"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 CardActions from "@mui/material/CardActions";
import RestartAlt from "@mui/icons-material/RestartAlt";
import Button from "@mui/material/Button";
import { useFormContext } from "react-hook-form";
import { CreateProjectInputs } from "@/app/api/projects/actions";

const ProjectClientDetails: React.FC<{ isActive: boolean }> = ({
  isActive,
}) => {
  const { t } = useTranslation();
  const {
    register,
    formState: { errors },
  } = useFormContext<CreateProjectInputs>();

  return (
    <Card sx={{ display: isActive ? "block" : "none" }}>
      <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("Project Code")}
                fullWidth
                {...register("projectCode")}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Project Name")}
                fullWidth
                {...register("projectName", {
                  required: "Project name required!",
                })}
                error={Boolean(errors.projectName)}
              />
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth>
                <InputLabel>{t("Project Category")}</InputLabel>
                <Select
                  label={t("Project Category")}
                  value={"Temporary Project"}
                >
                  <MenuItem value={"Temporary Project"}>
                    {t("Temporary Project")}
                  </MenuItem>
                </Select>
              </FormControl>
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth>
                <InputLabel>{t("Team Lead")}</InputLabel>
                <Select label={t("Team Lead")} value={"00539 - Ming CHAN (MC)"}>
                  <MenuItem value={"00539 - Ming CHAN (MC)"}>
                    {"00539 - Ming CHAN (MC)"}
                  </MenuItem>
                </Select>
              </FormControl>
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Project Description")}
                fullWidth
                {...register("projectDescription")}
              />
            </Grid>
          </Grid>
        </Box>

        <Box>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {t("Client Details")}
          </Typography>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <TextField
                label={t("Client Code")}
                fullWidth
                {...register("clientCode")}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("ClientName")}
                fullWidth
                {...register("clientName")}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Client Lead Name")}
                fullWidth
                {...register("clientContactName")}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Client Lead Phone Number")}
                fullWidth
                {...register("clientPhone")}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Client Lead Email")}
                fullWidth
                {...register("clientEmail")}
              />
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth>
                <InputLabel>{t("Client Subsidiary")}</InputLabel>
                <Select
                  label={t("Client Subsidiary")}
                  value={"Test Subsidiary"}
                >
                  <MenuItem value={"Test Subsidiary"}>
                    {t("Test Subsidiary")}
                  </MenuItem>
                </Select>
              </FormControl>
            </Grid>
          </Grid>
        </Box>
        <CardActions sx={{ justifyContent: "flex-end" }}>
          <Button variant="text" startIcon={<RestartAlt />}>
            {t("Reset")}
          </Button>
        </CardActions>
      </CardContent>
    </Card>
  );
};

export default ProjectClientDetails;
