"use client"
import { ImportTestingForm } from "@/app/api/settings/importTesting/actions";
import { ImportPoForm } from "@/app/api/settings/importTesting/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 ImportPo: React.FC<Props> = ({
}) => {

    const { t } = useTranslation()
    const [isLoading, setIsLoading] = useState(false)
    const {
        control,
        formState: { errors },
        watch
    } = useFormContext<ImportTestingForm>()

    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 PO")}</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="po.dateFrom"
                                    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("Import Po 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="po.dateTo"
                                    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("Import Po 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="importPo"
                        id="importPo"
                        variant="contained"
                        startIcon={<Check />}
                        type="submit"
                    >
                        {t("Import Po")}
                    </Button>
                </Stack>
            </CardContent>
        </Card>
    )
}

export default ImportPo;