"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 { useTranslation } from "react-i18next";
import ClaimFormInputGrid from "./ClaimFormInputGrid";
import { expenseTypeCombo } from "@/app/utils/comboUtil";
import { Controller, useFormContext } from "react-hook-form";
import { ClaimInputFormByStaff } from "@/app/api/claims/actions";
import { ProjectCombo } from "@/app/api/claims";
import { TextField } from "@mui/material";

interface Props {
  projectCombo: ProjectCombo[]
}

const ClaimFormInfo: React.FC<Props> = ({ projectCombo }) => {
  const { t } = useTranslation();

  const {
    control,
    register,
  } = useFormContext<ClaimInputFormByStaff>();

  return (
    <Card>
      <CardContent component={Stack} spacing={4}>
        <Box>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            <Grid item xs={6}>
              <TextField
                fullWidth
                label={t("Claim Code")}
                {...register("code")}
                disabled={true}
              />
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth>
                <InputLabel>{t("Expense Type")}</InputLabel>
                <Controller
                  // defaultValue={expenseTypeCombo[0].value}
                  control={control}
                  name="expenseType"
                  render={({ field }) => (
                    <Select label={t("Expense Type")} {...field}>
                      {
                        expenseTypeCombo.map((type, index) => (
                          <MenuItem key={`${type}-${index}`} value={type}>
                            {t(type)}
                          </MenuItem>
                        ))
                      }
                    </Select>
                  )}
                />
              </FormControl>
            </Grid>
          </Grid>
        </Box>
        <Card>
          <ClaimFormInputGrid projectCombo={projectCombo} />
        </Card>
      </CardContent>
    </Card>
  );
};

export default ClaimFormInfo;