import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, Modal, PowerhouseButton } from "@powerhousedao/design-system";
import { isValidName } from "document-drive";
import { useCallback, useState } from "react";
import { twMerge } from "tailwind-merge";
import { FormInput } from "../form-input/form-input.js";
const buttonStyles = "min-h-[48px] min-w-[142px] text-base font-semibold py-3 px-6 rounded-xl outline-none active:opacity-75 hover:scale-105 transform transition-all";
const CLOSE_ANIMATION_DURATION = 300;
export function CreateDocumentModal(props) {
    const { onOpenChange, onContinue, overlayProps, contentProps, ...restProps } = props;
    const [nodeName, setNodeName] = useState("");
    const [isValid, setIsValid] = useState(false);
    const handleCancel = () => {
        onOpenChange?.(false);
        setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION);
    };
    const handleCreate = useCallback(() => {
        if (!isValid) {
            return;
        }
        onContinue(nodeName);
        setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION);
    }, [isValid, nodeName, onContinue]);
    const handleSubmit = useCallback((e) => {
        e.preventDefault();
        handleCreate();
    }, [handleCreate]);
    return (_jsx(Modal, { contentProps: {
            ...contentProps,
            className: twMerge("rounded-3xl", contentProps?.className),
        }, onOpenChange: onOpenChange, overlayProps: {
            ...overlayProps,
            className: overlayProps?.className,
        }, ...restProps, children: _jsxs("form", { name: "create-document", className: "w-[400px] p-6 text-slate-300", onSubmit: handleSubmit, children: [_jsx("div", { className: "border-b border-slate-50 pb-2 text-2xl font-bold text-gray-800", children: "Create a new document" }), _jsxs("div", { className: "my-6", children: [!isValid && nodeName && (_jsx("div", { className: "mb-2 text-red-500", children: "Document name must be valid URL characters." })), _jsx(FormInput, { icon: _jsx(Icon, { name: "BrickGlobe" }), onChange: (e) => {
                                const name = e.target.value;
                                setNodeName(name);
                                setIsValid(isValidName(name));
                            }, placeholder: "Document name", required: true, value: nodeName })] }), _jsxs("div", { className: "mt-8 flex justify-between gap-3", children: [_jsx("button", { type: "button", className: twMerge(buttonStyles, "flex-1 bg-slate-50 text-slate-800"), onClick: handleCancel, children: "Cancel" }), _jsx(PowerhouseButton, { type: "submit", className: twMerge(buttonStyles, "flex-1 bg-gray-800 text-gray-50"), disabled: !isValid, children: "Create" })] })] }) }));
}
//# sourceMappingURL=create-document-modal.js.map