import { useForm } from '@inertiajs/react';
import { createOperationKey } from '@/lib/operation-key';
import { button, card, input } from '@/pages/investment/shared';
import type { DeskDocument, DeskPayment } from './desk-internal-operations';

export default function DeskPaymentDocumentForm({
    requestId,
    payment,
    documents,
}: {
    requestId: string;
    payment: DeskPayment;
    documents: DeskDocument[];
}) {
    const form = useForm({
        version: payment.version,
        document_link_id: '',
        reason: '',
        consent: false,
        client_key: createOperationKey(),
    });
    return (
        <form
            className={card + ' space-y-3'}
            onSubmit={(event) => {
                event.preventDefault();
                if (form.processing || form.data.version !== payment.version)
                    return;
                form.put(
                    `/balcao-virtual/pedidos/${requestId}/pagamentos/${payment.id}/comprovativo`,
                    {
                        onSuccess: () => {
                            form.reset('document_link_id', 'reason', 'consent');
                            form.setData('version', form.data.version + 1);
                            form.setData('client_key', createOperationKey());
                        },
                    },
                );
            }}
        >
            <h4 className="font-bold">
                {payment.document_id
                    ? 'Corrigir comprovativo deste registo'
                    : 'Juntar comprovativo a este registo'}
            </h4>
            <p>
                A referência, o valor e a moeda já registados são conservados. O
                comprovativo ficará por conferir; o histórico da conferência
                anterior é preservado.
            </p>
            {form.data.version !== payment.version && (
                <p role="alert">
                    Este registo foi actualizado. Confira a versão actual antes
                    de continuar.{' '}
                    <button
                        type="button"
                        disabled={form.processing}
                        onClick={() => {
                            form.setData('version', payment.version);
                            form.setData('client_key', createOperationKey());
                            form.setData('consent', false);
                        }}
                    >
                        Usar versão actual, conservando a selecção
                    </button>
                </p>
            )}
            <label className="block">
                Comprovativo já associado ao pedido ou dossier
                <select
                    className={input}
                    required
                    disabled={form.processing}
                    value={form.data.document_link_id}
                    onChange={(event) => {
                        form.setData('document_link_id', event.target.value);
                        form.setData('client_key', createOperationKey());
                        form.setData('consent', false);
                    }}
                >
                    <option value="">Seleccione o documento de suporte</option>
                    {documents.map((doc) => (
                        <option key={doc.id} value={doc.id}>
                            {doc.file_name} · versão{' '}
                            {doc.version_no ?? 'por confirmar'} ·{' '}
                            {doc.source_reference}
                        </option>
                    ))}
                </select>
            </label>
            <p>
                Se o original ainda não está associado, utilize os anexos do
                pedido ou os documentos do dossier e regresse a este registo.
            </p>
            <label className="block">
                Motivo da associação ou correcção
                <textarea
                    className={input}
                    required
                    minLength={3}
                    maxLength={3000}
                    disabled={form.processing}
                    value={form.data.reason}
                    onChange={(event) => {
                        form.setData('reason', event.target.value);
                        form.setData('client_key', createOperationKey());
                        form.setData('consent', false);
                    }}
                />
            </label>
            <label className="flex gap-2">
                <input
                    type="checkbox"
                    required
                    disabled={form.processing}
                    checked={form.data.consent}
                    onChange={(event) =>
                        form.setData('consent', event.target.checked)
                    }
                />
                Autorizo associar este comprovativo ao registo existente.
            </label>
            <button
                className={button}
                disabled={
                    form.processing || form.data.version !== payment.version
                }
            >
                Guardar comprovativo no mesmo registo
            </button>
            {Object.entries(form.errors).map(([key, error]) => (
                <p role="alert" key={key}>
                    {error}
                </p>
            ))}
        </form>
    );
}