import { Link, useForm } from '@inertiajs/react';
import { Panel, FormErrors, controlClass } from '@/components/procurement';
import { Button } from '@/components/ui/button';

export type OrderCancellationState = {
    enabled: boolean;
    state: string;
    canRequest: boolean;
};

export default function OrderCancellationRequest({
    orderId,
    state,
}: {
    orderId: number;
    state: OrderCancellationState;
}) {
    const form = useForm({
        operation_key: crypto.randomUUID(),
        reason: '',
        evidence: '',
    });
    if (!state.enabled && state.state === 'issued') return null;
    return (
        <Panel title="Estado operacional e cancelamento">
            <p>
                {state.state === 'cancelled'
                    ? 'Ordem cancelada. O documento emitido e as suas aprovações são preservados.'
                    : state.state === 'cancellation_pending'
                      ? 'Cancelamento pendente. Novas recepções e facturas estão bloqueadas.'
                      : 'Ordem emitida. Cancelamento sujeito a política própria publicada e decisão independente de Finanças.'}
            </p>
            {state.enabled && (
                <Link
                    className="mt-3 block underline"
                    href="/ordens/cancelamentos"
                >
                    Acompanhar pedidos e política de cancelamento
                </Link>
            )}
            {state.enabled && state.canRequest && state.state === 'issued' && (
                <details className="mt-4 rounded border p-3">
                    <summary>Pedir cancelamento integral</summary>
                    <form
                        className="mt-4 space-y-4"
                        onSubmit={(event) => {
                            event.preventDefault();
                            form.post(`/ordens/${orderId}/cancelamento`);
                        }}
                    >
                        <FormErrors errors={form.errors} />
                        <p className="text-sm">
                            Só para ordens sem qualquer recepção, factura ou
                            pagamento. O pedido suspende nova execução até à
                            decisão.
                        </p>
                        <label className="block">
                            Fundamento
                            <textarea
                                className={controlClass}
                                minLength={10}
                                maxLength={4000}
                                required
                                value={form.data.reason}
                                onChange={(event) =>
                                    form.setData('reason', event.target.value)
                                }
                            />
                        </label>
                        <label className="block">
                            Referência e descrição da documentação de suporte
                            <textarea
                                className={controlClass}
                                minLength={10}
                                maxLength={4000}
                                required
                                value={form.data.evidence}
                                onChange={(event) =>
                                    form.setData('evidence', event.target.value)
                                }
                            />
                        </label>
                        <Button disabled={form.processing}>
                            Submeter pedido de cancelamento
                        </Button>
                    </form>
                </details>
            )}
        </Panel>
    );
}