import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Icons } from "../icons";
import { useMemo, useRef, useState } from "react";
import { EmbedPopup } from "../popups/embed-popup";
import { TablePopup } from "../popups/table-popup";
import { Icon } from "@notesnook/ui";
import { useIsMobile, useToolbarLocation } from "../stores/toolbar-store";
import { ResponsivePresenter } from "../../components/responsive";
import { showPopup } from "../../components/popup-presenter";
import { ImageUploadPopup } from "../popups/image-upload";
import { Button } from "../../components/button";
export function InsertBlock(props) {
    const { editor } = props;
    const buttonRef = useRef(null);
    const [isOpen, setIsOpen] = useState(false);
    const toolbarLocation = useToolbarLocation();
    const isMobile = useIsMobile();
    const menuItems = useMemo(() => {
        return [
            tasklist(editor),
            outlinelist(editor),
            horizontalRule(editor),
            codeblock(editor),
            mathblock(editor),
            callout(editor),
            blockquote(editor),
            image(editor, isMobile),
            attachment(editor),
            isMobile ? embedMobile(editor) : embedDesktop(editor),
            table(editor)
        ];
    }, [editor, isMobile]);
    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, variant: "secondary", sx: {
                    p: 1,
                    m: 0,
                    bg: isOpen ? "var(--background-secondary)" : "transparent",
                    mr: 1,
                    display: "flex",
                    alignItems: "center",
                    ":last-of-type": {
                        mr: 0
                    }
                }, onMouseDown: (e) => {
                    if (globalThis.keyboardShown) {
                        e.preventDefault();
                    }
                }, onClick: () => setIsOpen((s) => !s), children: _jsx(Icon, { path: Icons.plus, size: "medium", color: "accent" }) }), _jsx(ResponsivePresenter, { desktop: "menu", mobile: "sheet", title: "Choose a block to insert", isOpen: isOpen, items: menuItems, onClose: () => setIsOpen(false), position: {
                    target: buttonRef.current || undefined,
                    isTargetAbsolute: true,
                    location: toolbarLocation === "bottom" ? "top" : "below",
                    yOffset: 5
                } })] }));
}
const horizontalRule = (editor) => ({
    key: "hr",
    type: "button",
    title: "Horizontal rule",
    icon: Icons.horizontalRule,
    isChecked: editor.isActive("horizontalRule"),
    onClick: () => editor.chain().focus().setHorizontalRule().run()
});
const codeblock = (editor) => ({
    key: "codeblock",
    type: "button",
    title: "Code block",
    icon: Icons.codeblock,
    isChecked: editor.isActive("codeBlock"),
    onClick: () => editor.chain().focus().toggleCodeBlock().run(),
    modifier: "Mod-Shift-C"
});
const blockquote = (editor) => ({
    key: "blockquote",
    type: "button",
    title: "Quote",
    icon: Icons.blockquote,
    isChecked: editor.isActive("blockQuote"),
    onClick: () => editor.chain().focus().toggleBlockquote().run(),
    modifier: "Mod-Shift-B"
});
const mathblock = (editor) => ({
    key: "math",
    type: "button",
    title: "Math & formulas",
    icon: Icons.mathBlock,
    isChecked: editor.isActive("mathBlock"),
    onClick: () => editor.chain().focus().insertMathBlock().run(),
    modifier: "Mod-Shift-M"
});
const callout = (editor) => ({
    key: "callout",
    type: "button",
    title: "Callout",
    icon: Icons.callout,
    menu: {
        items: [
            "Abstract",
            "Hint",
            "Info",
            "Success",
            "Warn",
            "Error",
            "Example",
            "Quote"
        ].map((type) => ({
            title: type,
            key: type,
            type: "button",
            isChecked: editor.isActive("callout", { type: type.toLowerCase() }),
            onClick: () => editor
                .chain()
                .focus()
                .setCallout({ type: type.toLowerCase() })
                .run()
        }))
    }
});
const image = (editor, isMobile) => ({
    key: "image",
    type: "button",
    title: "Image",
    icon: Icons.image,
    menu: {
        title: "Insert an image",
        items: [
            {
                key: "upload-from-disk",
                type: "button",
                title: "Upload from disk",
                icon: Icons.upload,
                onClick: () => { var _a, _b; return (_b = (_a = editor.storage).openAttachmentPicker) === null || _b === void 0 ? void 0 : _b.call(_a, "image"); },
                modifier: "Mod-Shift-I"
            },
            {
                key: "camera",
                type: "button",
                title: "Take a photo using camera",
                icon: Icons.camera,
                isHidden: !isMobile,
                onClick: () => { var _a, _b; return (_b = (_a = editor.storage).openAttachmentPicker) === null || _b === void 0 ? void 0 : _b.call(_a, "camera"); }
            },
            isMobile ? uploadImageFromURLMobile(editor) : uploadImageFromURL(editor)
        ]
    }
});
const table = (editor) => ({
    key: "table",
    type: "button",
    title: "Table",
    icon: Icons.table,
    menu: {
        title: "Insert a table",
        items: [
            {
                key: "table-size-selector",
                type: "popup",
                component: (props) => (_jsx(TablePopup, { onInsertTable: (size) => {
                        var _a;
                        editor === null || editor === void 0 ? void 0 : editor.chain().focus().insertTable({
                            rows: size.rows,
                            cols: size.columns
                        }).run();
                        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
                    } }))
            }
        ]
    }
});
const embedMobile = (editor) => ({
    key: "embed",
    type: "button",
    title: "Embed",
    icon: Icons.embed,
    menu: {
        title: "Insert an embed",
        items: [
            {
                key: "embed-popup",
                type: "popup",
                component: function ({ onClick }) {
                    return (_jsx(EmbedPopup, { title: "Insert embed", onClose: (embed) => {
                            if (!embed)
                                return onClick === null || onClick === void 0 ? void 0 : onClick();
                            editor.chain().insertEmbed(embed).run();
                            onClick === null || onClick === void 0 ? void 0 : onClick();
                        } }));
                }
            }
        ]
    }
});
const embedDesktop = (editor) => ({
    key: "embed",
    type: "button",
    title: "Embed",
    icon: Icons.embed,
    onClick: () => {
        if (!editor)
            return;
        showPopup({
            popup: (hide) => (_jsx(EmbedPopup, { title: "Insert embed", onClose: (embed) => {
                    if (!embed)
                        return hide();
                    editor.chain().insertEmbed(embed).run();
                    hide();
                } }))
        });
    }
});
const attachment = (editor) => ({
    key: "attachment",
    type: "button",
    title: "Attachment",
    icon: Icons.attachment,
    isChecked: editor.isActive("attachment"),
    onClick: () => { var _a, _b; return (_b = (_a = editor.storage).openAttachmentPicker) === null || _b === void 0 ? void 0 : _b.call(_a, "file"); },
    modifier: "Mod-Shift-A"
});
const tasklist = (editor) => ({
    key: "tasklist",
    type: "button",
    title: "Task list",
    icon: Icons.checkbox,
    isChecked: editor.isActive("taskList"),
    onClick: () => editor.chain().focus().toggleTaskList().run(),
    modifier: "Mod-Shift-T"
});
const outlinelist = (editor) => ({
    key: "outlinelist",
    type: "button",
    title: "Outline list",
    icon: Icons.outlineList,
    isChecked: editor.isActive("outlineList"),
    onClick: () => editor.chain().focus().toggleOutlineList().run(),
    modifier: "Mod-Shift-O"
});
const uploadImageFromURLMobile = (editor) => ({
    key: "upload-from-url",
    type: "button",
    title: "Attach from URL",
    icon: Icons.link,
    menu: {
        title: "Attach image from URL",
        items: [
            {
                key: "attach-image",
                type: "popup",
                component: ({ onClick }) => (_jsx(ImageUploadPopup, { onInsert: (image) => {
                        var _a;
                        (_a = editor
                            .requestPermission("insertImage")) === null || _a === void 0 ? void 0 : _a.chain().focus().insertImage(image).run();
                        onClick === null || onClick === void 0 ? void 0 : onClick();
                    }, onClose: () => {
                        onClick === null || onClick === void 0 ? void 0 : onClick();
                    } }))
            }
        ]
    }
});
const uploadImageFromURL = (editor) => ({
    key: "upload-from-url",
    type: "button",
    title: "Attach from URL",
    icon: Icons.link,
    onClick: () => {
        showPopup({
            popup: (hide) => (_jsx(ImageUploadPopup, { onInsert: (image) => {
                    var _a;
                    (_a = editor
                        .requestPermission("insertImage")) === null || _a === void 0 ? void 0 : _a.chain().focus().insertImage(image).run();
                    hide();
                }, onClose: hide }))
        });
    }
});
