import { DoDetail } from "@/app/api/do/actions";
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 DoInfoCard: React.FC<Props> = ({

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

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

    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
                                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("supplierCode")}
                                label={t("Supplier Code")}
                                fullWidth
                                disabled={true}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <TextField
                                {...register("shopCode")}
                                label={t("Shop Code")}
                                fullWidth
                                disabled={true}
                            />
                        </Grid>
          
                        <Grid item xs={6}>
                            <TextField
                                {...register("orderDate")}
                                label={t("Order Date")}
                                fullWidth
                                disabled={true}
                            />
                        </Grid>
                        <Grid item xs={6}>
                            <TextField
                                {...register("estimatedArrivalDate")}
                                label={t("Estimated Arrival Date")}
                                fullWidth
                                disabled={true}
                            />
                        </Grid>
                 
                        <Grid item xs={6}/>
                    </Grid>
                </Box>
            </CardContent>
        </Card>
    )
}

export default DoInfoCard;