import { useState } from "react";
import Modal from "@/src/components/twui/elements/Modal";
import ClientRuleModalBody from "./client-rule-modal-body";
import ClientRuleModalTarget from "./client-rule-modal-target";
import type { ClientRuleDraft } from "./client-rule-draft";

/** `cancelled` keeps the modal open without showing an error. */
export type ClientRuleModalSaveResult = {
    success: boolean;
    msg?: string;
    cancelled?: boolean;
};

export type ClientRuleModalSave = ({
    rules,
}: {
    rules: ClientRuleDraft[];
}) => Promise<ClientRuleModalSaveResult>;

type Props = {
    /** The rule to edit. Omit to add a new one. */
    rule?: ClientRuleDraft;
    onSave: ClientRuleModalSave;
    disabled?: boolean;
};

/**
 * Validates a rule and hands it to `onSave`. Closes only on success. Commas in
 * the destination yield several drafts, in both add and edit.
 */
export default function ClientRuleModal({ rule, onSave, disabled }: Props) {
    const [open, setOpen] = useState(false);

    return (
        <Modal
            open={open}
            setOpen={setOpen}
            className="max-w-lg p-5"
            target={<ClientRuleModalTarget is_edit={Boolean(rule)} disabled={disabled} />}
        >
            <ClientRuleModalBody rule={rule} onSave={onSave} onClose={() => setOpen(false)} />
        </Modal>
    );
}