"use client";

import { FGPickOrderResponse } from "@/app/api/pickOrder/actions";
import { Box, Card, CardContent, Grid, Stack, TextField, Button } from "@mui/material";
import { useTranslation } from "react-i18next";
import QrCodeIcon from '@mui/icons-material/QrCode';
import { OUTPUT_DATE_FORMAT } from "@/app/utils/formatUtil";
import dayjs from "dayjs";

type Props = {
  fgOrder: FGPickOrderResponse;
  onQrCodeClick: (pickOrderId: number) => void;
};

const FGPickOrderCard: React.FC<Props> = ({ fgOrder, onQrCodeClick }) => {
  const { t } = useTranslation("pickOrder");

  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("Delivery Code")}
                fullWidth
                disabled={true}
                value={fgOrder.deliveryNo}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Pick Order Code")}
                fullWidth
                disabled={true}
                value={fgOrder.pickOrderCode}
                //helperText={fgOrder.pickOrderConsoCode}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Shop PO Code")}
                fullWidth
                disabled={true}
                value={fgOrder.shopPoNo}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Store ID")}
                fullWidth
                disabled={true}
                value={fgOrder.storeId}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Shop ID")}
                fullWidth
                disabled={true}
                value={fgOrder.shopCode}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Shop Name")}
                fullWidth
                disabled={true}
                value={fgOrder.shopName}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Delivery Date")}
                fullWidth
                disabled={true}
                value={dayjs(fgOrder.deliveryDate).format(OUTPUT_DATE_FORMAT)}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                label={t("Shop Address")}
                fullWidth
                disabled={true}
                value={fgOrder.shopAddress}
                multiline
                rows={2}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Departure Time")}
                fullWidth
                disabled={true}
                value={fgOrder.DepartureTime}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Truck No.")}
                fullWidth
                disabled={true}
                value={fgOrder.truckLanceCode}
              />
            </Grid>
            <Grid item xs={6}>
              <TextField
                label={t("Ticket No.")}
                fullWidth
                disabled={true}
                value={fgOrder.ticketNo}
              />
            </Grid>

          </Grid>
        </Box>
      </CardContent>
    </Card>
  );
};

export default FGPickOrderCard;