import PrimaryButton from '@/Components/PrimaryButton';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from '@/Components/ui/sheet';
import { useForm } from '@inertiajs/react';
import { Loader2 } from 'lucide-react';
import React, { FormEventHandler } from 'react';

interface SidebarFormProps {
    title: string;
    children: React.ReactElement;
    trigger: React.ReactNode;
    submitMethod: 'put' | 'post';
    submitRoute: string;
    onOpenChange?: (open: boolean) => void;
    canSubmit?: boolean;
    side?: 'top' | 'bottom' | 'left' | 'right';
    className?: string;
    description?: string;
    submitButtonText?: string;
    showSubmitButton?: boolean;
    open?: boolean;
    initialData: Record<string, unknown>;
}

export default function SidebarForm({
    title,
    children,
    trigger,
    submitRoute,
    submitMethod,
    canSubmit = true,
    side = 'right',
    className = 'overflow-auto',
    description,
    submitButtonText = 'Salva',
    showSubmitButton = true,
    initialData = {},
}: SidebarFormProps) {
    const [open, setOpen] = React.useState(false);

    const { data, setData, processing, errors, put, post, transform } =
        useForm(initialData);

    const submitMethodMap = {
        put: put,
        post: post,
    };

    const handleOpenChange = (newOpen: boolean) => {
        if (newOpen) {
            setData(initialData);
        }
        setOpen(newOpen);
    };

    const handleSubmit: FormEventHandler = (e) => {
        e.preventDefault();

        submitMethodMap[submitMethod](submitRoute, {
            onSuccess: () => {
                setOpen(false);
            },
        });
    };

    const renderChildren = () => {
        if (React.isValidElement(children)) {
            return React.cloneElement(children, {
                data,
                setData,
                errors,
                transform,
            } as React.Attributes);
        }
        return children;
    };

    return (
        <Sheet open={open} onOpenChange={handleOpenChange}>
            <SheetTrigger asChild>{trigger}</SheetTrigger>
            <SheetContent side={side} className={className}>
                <SheetHeader>
                    <SheetTitle>{title}</SheetTitle>
                    {description && (
                        <SheetDescription>{description}</SheetDescription>
                    )}
                    <form onSubmit={handleSubmit}>
                        {renderChildren()}

                        {showSubmitButton && canSubmit && (
                            <div className="mt-20 flex items-center justify-end">
                                <PrimaryButton
                                    className="ms-4"
                                    disabled={processing}
                                >
                                    {processing ? (
                                        <Loader2 className="animate-spin" />
                                    ) : null}
                                    {submitButtonText}
                                </PrimaryButton>
                            </div>
                        )}
                    </form>
                </SheetHeader>
            </SheetContent>
        </Sheet>
    );
}