import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '../ui/dialog';
import { TextareaControl } from '../ui/textarea-control';
import { DismissibleAlert } from '../ui/dismissible-alert';

interface TaskOutcomeDialogProps {
    open: boolean;
    onClose: () => void;
    title: string;
    lede: string;
    label: string;
    /** An explanation must be written; a completion message may be left empty. */
    required: boolean;
    value: string;
    onChange: (value: string) => void;
    onSubmit: () => void;
    submitting: boolean;
    error?: string;
}

/**
 * How a task ended, with room to say something to the practice. Both outcomes use it: an unable
 * needs its reason, a completion takes an optional message. The X is the only way out, so there is
 * no Cancel beside Submit.
 */
export const TaskOutcomeDialog = ({
    open,
    onClose,
    title,
    lede,
    label,
    required,
    value,
    onChange,
    onSubmit,
    submitting,
    error,
}: TaskOutcomeDialogProps) => (
    <Dialog open={open} onOpenChange={(next) => { if (!next && !submitting) onClose(); }}>
        <DialogContent className="sm:max-w-lg">
            <DialogHeader>
                <DialogTitle>{title}</DialogTitle>
                <DialogDescription>{lede}</DialogDescription>
            </DialogHeader>

            {error && (
                <DismissibleAlert status="error">
                    {error}
                </DismissibleAlert>
            )}

            <TextareaControl
                label={label}
                value={value}
                onChange={onChange}
                rows={5}
                required={required}
                disabled={submitting}
            />

            <DialogFooter>
                <button
                    type="button"
                    className={`btn btn-green${submitting ? ' btn-busy' : ''}`}
                    onClick={onSubmit}
                    disabled={submitting || (required && !value.trim())}
                >
                    Submit
                </button>
            </DialogFooter>
        </DialogContent>
    </Dialog>
);

export default TaskOutcomeDialog;