import { Form } from '@inertiajs/react';
import { ArrowUpTrayIcon } from '@heroicons/react/24/outline';
import { useState } from 'react';
import DocumentEntryController from '@/actions/App/Http/Controllers/Documents/DocumentEntryController';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

type Props = {
    documentIframeId: string;
    parentId: string | null;
};

export function UploadFileDialog({
    documentIframeId,
    parentId,
}: Props) {
    const [open, setOpen] = useState(false);

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button type="button" variant="outline">
                    <ArrowUpTrayIcon className="size-5" />
                    Subir archivo
                </Button>
            </DialogTrigger>

            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Subir archivo</DialogTitle>

                    <DialogDescription>
                        Selecciona el documento que deseas agregar a
                        esta ubicación.
                    </DialogDescription>
                </DialogHeader>

                <Form
                    {...DocumentEntryController.storeFile.form(
                        documentIframeId,
                    )}
                    resetOnSuccess
                    onSuccess={() => setOpen(false)}
                    className="grid gap-5"
                >
                    {({ processing, errors, progress }) => (
                        <>
                            <input
                                type="hidden"
                                name="parent"
                                value={parentId ?? ''}
                            />

                            <div className="grid gap-2">
                                <Label htmlFor="file-name">
                                    Nombre para mostrar
                                </Label>

                                <Input
                                    id="file-name"
                                    name="name"
                                    placeholder="Opcional"
                                />

                                <p className="text-xs text-muted-foreground">
                                    Si lo dejas vacío se utilizará el
                                    nombre original del archivo.
                                </p>

                                <InputError message={errors.name} />
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="document-file">
                                    Archivo
                                </Label>

                                <Input
                                    id="document-file"
                                    name="file"
                                    type="file"
                                    required
                                    accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.csv,.txt,.jpg,.jpeg,.png,.webp"
                                />

                                <p className="text-xs text-muted-foreground">
                                    Tamaño máximo: 50 MB.
                                </p>

                                <InputError message={errors.file} />
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="file-sort-order">
                                    Orden
                                </Label>

                                <Input
                                    id="file-sort-order"
                                    name="sort_order"
                                    type="number"
                                    min="0"
                                    defaultValue="1"
                                    required
                                />

                                <InputError
                                    message={errors.sort_order}
                                />
                            </div>

                            <InputError message={errors.parent} />

                            {progress && (
                                <div className="grid gap-2">
                                    <div className="h-2 overflow-hidden rounded-full bg-muted">
                                        <div
                                            className="h-full bg-primary transition-all"
                                            style={{
                                                width: `${progress.percentage}%`,
                                            }}
                                        />
                                    </div>

                                    <p className="text-xs text-muted-foreground">
                                        Subiendo {progress.percentage}%
                                    </p>
                                </div>
                            )}

                            <DialogFooter>
                                <Button
                                    type="button"
                                    variant="outline"
                                    disabled={processing}
                                    onClick={() => setOpen(false)}
                                >
                                    Cancelar
                                </Button>

                                <Button
                                    type="submit"
                                    disabled={processing}
                                >
                                    Subir archivo
                                </Button>
                            </DialogFooter>
                        </>
                    )}
                </Form>
            </DialogContent>
        </Dialog>
    );
}