import { Stack } from "@mui/material";
import dayjs from "dayjs";
import { FC } from "react";
import * as yup from "yup";

import { ReportType } from "@/contracts/client.schemas";

import { DateRange } from "../components/DateRange";
import { ReportBuilderActions } from "../components/ReportBuilderActions";
import { useReportForm } from "../hooks/useReportForm";

interface FormType {
	From: string;
	To: string;
}

const validationSchema = yup.object().shape({
	From: yup.date().required("From is required"),
	To: yup.date().required("To is required"),
});

export const SummaryEventsExtraProperties: FC = () => {
	const initialValues: FormType = {
		From: dayjs().startOf("day").toISOString(),
		To: dayjs().toISOString(),
	};

	const formik = useReportForm(
		initialValues,
		validationSchema,
		ReportType.SummaryEvents,
	);

	return (
		<form onSubmit={formik.handleSubmit}>
			<Stack spacing={3}>
				<DateRange
					name="dateRange"
					onChange={(_, x) => {
						formik.setFieldValue("From", x[0]);
						formik.setFieldValue("To", x[1]);
					}}
				/>
				<ReportBuilderActions
					isLoading={formik.isSubmitting}
					isValid={formik.isValid}
					onCancel={formik.resetForm}
				/>
			</Stack>
		</form>
	);
};
