FPSMS-frontend/src/components/M18ImportTesting/M18ImportDo.tsx

"use client";
import {
  M18ImportTestingForm,
  M18ImportDoForm,
} from "@/app/api/settings/m18ImportTesting/actions";
import {
  INPUT_DATE_FORMAT,
  OUTPUT_DATE_FORMAT,
  OUTPUT_TIME_FORMAT,
  dateTimeStringToDayjs,
} from "@/app/utils/formatUtil";
import { Check } from "@mui/icons-material";
import {
  Box,
  Button,
  Card,
  CardContent,
  FormControl,
  Grid,
  Stack,
  Typography,
} from "@mui/material";
import {
  DatePicker,
  DateTimePicker,
  LocalizationProvider,
} from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs, { Dayjs } from "dayjs";
import React, { useCallback, useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";

interface Props {}

const M18ImportDo: React.FC<Props> = ({}) => {
  const { t } = useTranslation("m18ImportTesting");
  const [isLoading, setIsLoading] = useState(false);
  const {
    control,
    formState: { errors },
    watch,
  } = useFormContext<M18ImportTestingForm>();

  const handleDateTimePickerOnChange = useCallback(
    (value: Dayjs | null, onChange: (value: any) => void) => {
      const formattedValue = value
        ? value.format(`${INPUT_DATE_FORMAT} ${OUTPUT_TIME_FORMAT}`)
        : null;
      onChange(formattedValue);
    },
    [],
  );

  return (
    <Card sx={{ width: "100%" }}>
      <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
        <Grid container>
          <Grid container>
            <Typography variant="overline">
              {t("Import Delivery Order")}
            </Typography>
          </Grid>
          <Grid item xs={8}>
            <LocalizationProvider
              dateAdapter={AdapterDayjs}
              // TODO: Should maybe use a custom adapterLocale here to support YYYY-MM-DD
              adapterLocale="zh-hk"
            >
              <Box display="flex">
                <Controller
                  control={control}
                  name="do.modifiedDateFrom"
                  // rules={{
                  //     required: "Please input the date From!",
                  //     validate: {
                  //         isValid: (value) =>
                  //             value && dateTimeStringToDayjs(value).isValid() ? true : "Invalid date-time"
                  //     },
                  // }}
                  render={({ field, fieldState: { error } }) => (
                    <DateTimePicker
                      label={t("Modified Date From *")}
                      format={`${OUTPUT_DATE_FORMAT} ${OUTPUT_TIME_FORMAT}`}
                      onChange={(newValue: Dayjs | null) =>
                        handleDateTimePickerOnChange(newValue, field.onChange)
                      }
                      slotProps={{
                        textField: {
                          error: !!error,
                          helperText: error ? error.message : null,
                        },
                      }}
                    />
                  )}
                />
                <Box
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  marginInline={2}
                >
                  {"-"}
                </Box>
                <Controller
                  control={control}
                  name="do.modifiedDateTo"
                  // rules={{
                  //     required: "Please input the date to!",
                  //     validate: {
                  //         isValid: (value) =>
                  //             value && dateTimeStringToDayjs(value).isValid() ? true : "Invalid date-time",
                  //         isFuture: (value) =>
                  //             dateTimeStringToDayjs(value).isAfter(watch("do.dateFrom")) || "Date must be in the future",
                  //     },
                  // }}
                  render={({ field, fieldState: { error } }) => (
                    <DateTimePicker
                      label={t("Modified Date To *")}
                      format={`${OUTPUT_DATE_FORMAT} ${OUTPUT_TIME_FORMAT}`}
                      onChange={(newValue: Dayjs | null) =>
                        handleDateTimePickerOnChange(newValue, field.onChange)
                      }
                      slotProps={{
                        textField: {
                          error: !!error,
                          helperText: error ? error.message : null,
                        },
                      }}
                    />
                  )}
                />
              </Box>
            </LocalizationProvider>
          </Grid>
        </Grid>
        <Stack direction="row" justifyContent="flex-end" gap={1}>
          <Button
            name="m18ImportDo"
            id="m18ImportDo"
            variant="contained"
            startIcon={<Check />}
            type="submit"
          >
            {t("Import Do")}
          </Button>
        </Stack>
      </CardContent>
    </Card>
  );
};

export default M18ImportDo;