"use client";

import { Box, Card, CardContent, Grid, TextField, Stack } from "@mui/material";
import { useTranslation } from "react-i18next";
import { FGPickOrderResponse, DoPickOrderDetail } from "@/app/api/pickOrder/actions";

interface Props {
  fgOrder: FGPickOrderResponse;
  doPickOrderDetail?: DoPickOrderDetail | null; 
}

const FGPickOrderInfoCard: React.FC<Props> = ({ fgOrder, doPickOrderDetail }) => {
  const { t } = useTranslation("pickOrder");
  if (!fgOrder) {
    return null;
  }
  
  const pickOrderCodes = fgOrder.pickOrderCodes || "";
    
  const deliveryOrderCodes = fgOrder.deliveryNos || "";

  return (
    <Card sx={{ display: "block", mb: 2 }}>
      <CardContent component={Stack} spacing={2}>
        <Box>
          <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
            
          <Grid item xs={6}>
              <TextField
                value={pickOrderCodes || ""} //  显示所有 pick order codes
                label={t("Pick Order Code(s)")} //  修改标签
                fullWidth
                disabled={true}
                multiline={pickOrderCodes.includes(',')}  //  如果有多个代码，使用多行
                rows={pickOrderCodes.includes(',') ? 2 : 1}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={deliveryOrderCodes || ""} //  显示所有 delivery order codes
                label={t("Delivery Order Code(s)")} //  修改标签
                fullWidth
                disabled={true}
                multiline={deliveryOrderCodes.includes(',')}  //  如果有多个代码，使用多行
                rows={deliveryOrderCodes.includes(',') ? 2 : 1}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.shopName || ""}
                label={t("Shop Name")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.ticketNo || ""}
                label={t("Ticket No.")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.storeId || ""}
                label={t("Store ID")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.truckLanceCode || ""}
                label={t("Truck Lance Code")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.DepartureTime || ""}
                label={t("Departure Time")}
                fullWidth
                disabled={true}
              />
            </Grid>
            
            <Grid item xs={6}>
              <TextField
                value={fgOrder.shopAddress || ""}
                label={t("Shop Address")}
                fullWidth
                disabled={true}
                multiline
                rows={2}
              />
            </Grid>
            
          </Grid>
        </Box>
      </CardContent>
    </Card>
  );
};

export default FGPickOrderInfoCard;