"use client";

import { Button } from "@/components/ui/button";
import { zodResolver } from "@hookform/resolvers/zod";
import { FormProvider, useForm } from "react-hook-form";
import {
	AdvancedDateFilterSchema,
	AdvancedDateFilterValues,
} from "@/shared/components/advanced-date-filter/schemas/advanced-date-filter.schema";
import { memo, ReactNode } from "react";


type TAdvancedFilterProps = {
	defaultValues?: AdvancedDateFilterValues;
	onSubmit: (values: AdvancedDateFilterValues) => void;
	onReset?: () => void;
	children: ReactNode;
};

const DEFAULT_VALUES: AdvancedDateFilterValues = {
	dateRange: { segment: undefined, from: null, to: null },
	createdAt: { segment: "today", from: null, to: null },
	amount: null,
	status: [],
};

const AdvancedDateFilter = ({ onSubmit, onReset, defaultValues, children }: TAdvancedFilterProps) => {
	const methods = useForm<AdvancedDateFilterValues>({
		resolver: zodResolver(AdvancedDateFilterSchema),
		defaultValues: { ...DEFAULT_VALUES, ...defaultValues },
		mode: "onChange",
	});

	const {
		handleSubmit,
		reset,
		formState: { errors, isSubmitting },
	} = methods;

	const handleReset = () => {
		reset({ ...DEFAULT_VALUES, ...defaultValues })
		onReset?.();
	};

	return (
		<FormProvider {...methods}>
			<form
				onSubmit={handleSubmit(onSubmit)}
				className='flex flex-col gap-4 p-4 border border-[#EDEDF9] rounded-xl bg-[#F7F7FC]'>
				{Object.keys(errors).length > 0 && (
					<div className='p-3 text-sm text-red-600 bg-red-50 rounded-lg'>
						Please fix the errors in the form before submitting
					</div>
				)}
				<div className='grid grid-cols-12 gap-4'>
					<div className='col-span-12 flex divide-x divide-[#E9E9E9] [&>*]:px-10 [&>*:first-child]:pl-0'>
						{children}
					</div>
					<div className='col-span-12 flex items-end justify-end gap-4'>
						<Button
							variant='outlineColor'
							className='px-[40px] cursor-pointer'
							onClick={handleReset}
							type='button'
							disabled={isSubmitting}>
							Reset All
						</Button>
						<Button
							variant='main'
							className='px-[40px] cursor-pointer'
							type='submit'
							disabled={
								isSubmitting || Object.keys(errors).length > 0
							}>
							{isSubmitting ? "Applying..." : "Apply"}
						</Button>
					</div>
				</div>
			</form>
		</FormProvider>
	);
};

export default memo(AdvancedDateFilter);