import { JoDetail } from "@/app/api/jo";
import { decimalFormatter, integerFormatter } from "@/app/utils/formatUtil";
import { Box, Card, CardContent, Grid, Stack, TextField } from "@mui/material";
import { upperFirst } from "lodash";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";

type Props = {

};

const InfoCard: React.FC<Props> = ({

}) => {
    const { t } = useTranslation();

    const { control, getValues, register, watch } = useFormContext<JoDetail>();

    return (
        <Card sx={{ display: "block" }}>
            <CardContent component={Stack} spacing={4}>
                <Box>
                    <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
                            <Grid item xs={6}>
                                <TextField
                                    // {
                                    //     ...register("status")
                                    // }
                                    label={t("Status")}
                                    fullWidth
                                    disabled={true}
                                    value={`${t(upperFirst(watch("status")))}`}
                                />
                            </Grid>
                            <Grid item xs={6}/>
                            <Grid item xs={6}>
                                <TextField
                                    {
                                    ...register("code")
                                    }
                                    label={t("Code")}
                                    fullWidth
                                    disabled={true}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    {
                                    ...register("name")
                                    }
                                    label={t("Name")}
                                    fullWidth
                                    disabled={true}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    // {
                                    // ...register("name")
                                    // }
                                    label={t("Req. Qty")}
                                    fullWidth
                                    disabled={true}
                                    defaultValue={`${integerFormatter.format(watch("reqQty"))}`}
                                />
                            </Grid>
                            <Grid item xs={6}>
                                <TextField
                                    {
                                    ...register("outputQtyUom")
                                    }
                                    label={t("UoM")}
                                    fullWidth
                                    disabled={true}
                                />
                            </Grid>
                        </Grid>
                </Box>
            </CardContent>
        </Card>
    )
}

export default InfoCard;