import { Form } from '@inertiajs/react';
import { CodeBracketIcon } 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;
};

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

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

            <DialogContent className="sm:max-w-2xl">
                <DialogHeader>
                    <DialogTitle>
                        Agregar contenido embebido
                    </DialogTitle>

                    <DialogDescription>
                        Pega el código embebido proporcionado
                        por el servicio que deseas mostrar.
                    </DialogDescription>
                </DialogHeader>

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

                            <div className="grid gap-2">
                                <Label htmlFor="embed-name">
                                    Nombre
                                </Label>

                                <Input
                                    id="embed-name"
                                    name="name"
                                    required
                                    placeholder="Ej. Documento de Google Drive"
                                />

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

                            <div className="grid gap-2">
                                <Label htmlFor="embed-code">
                                    Código embebido
                                </Label>

                                <textarea
                                    id="embed-code"
                                    name="embed_code"
                                    required
                                    rows={10}
                                    spellCheck={false}
                                    placeholder={'<iframe src="https://..." width="100%" height="600"></iframe>'}
                                    className="min-h-56 w-full resize-y rounded-md border border-input bg-background px-3 py-2 font-mono text-sm outline-none transition focus:ring-2 focus:ring-ring"
                                />

                                <p className="text-xs text-muted-foreground">
                                    Pega el código embed completo.
                                    Se conservarán las dimensiones y
                                    atributos incluidos en el código.
                                </p>

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

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

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

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

                            <InputError
                                message={errors.parent}
                            />

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

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