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

"use client"
import { M18ImportTestingForm, M18ImportPqForm } 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 M18ImportPq: React.FC<Props> = ({
}) => {

    const { t } = useTranslation()
    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 Purchase Quotation")}</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="pq.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="pq.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("po.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="m18ImportPq"
                        id="m18ImportPq"
                        variant="contained"
                        startIcon={<Check />}
                        type="submit"
                    >
                        {t("Import Pq")}
                    </Button>
                </Stack>
            </CardContent>
        </Card>
    )
}

export default M18ImportPq;