HangmanLab.Frontend/src/components/Modals/MarkdownSettingModal.js

import {useCreateMarkdownSetting, useMarkdownSetting} from "../../utils/queries/markdown-setting-queries";
import {useSaveMarkdown} from "../../utils/queries/markdown-queries";
import React, {useState} from "react";
import { Plus } from "lucide-react";
import MarkdownTemplateSettingPanel from "../Settings/MarkdownSettings/MarkdownTemplateSettingPanel";
import MarkdownPermissionSettingPanel from "../Settings/MarkdownSettings/MarkdownPermissionSettingPanel";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "../ui/dialog";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
import { Button } from "../ui/button";
import { Spinner } from "../ui/misc";

const MarkdownSettingModal = ({isOpen, markdown, onClose}) => {
    const {data: markdownSetting, isFetching: markdownSettingIsFetching} = useMarkdownSetting(markdown?.setting_id || 0);
    const createMarkdownSetting = useCreateMarkdownSetting();
    const updateMarkdown = useSaveMarkdown();

    const [activeTab, setActiveTab] = useState("template");

    const handleCreateMarkdownSetting = () => {
        createMarkdownSetting.mutate({}, {
            onSuccess: (res) => {
                updateMarkdown.mutate({
                    id: markdown.id,
                    data: {
                        setting_id: res.id
                    }
                });
            }
        });
    };

    return (
        <Dialog open={isOpen} onOpenChange={(o) => { if (!o) onClose(); }}>
            <DialogContent className="max-w-3xl">
                <DialogHeader>
                    <DialogTitle>Markdown Settings</DialogTitle>
                </DialogHeader>
                {markdownSettingIsFetching ? (
                    <div className="flex justify-center py-10">
                        <Spinner label="Loading settings" />
                    </div>
                ) : markdownSetting ? (
                    <Tabs value={activeTab} onValueChange={setActiveTab}>
                        <TabsList>
                            <TabsTrigger value="template">Template</TabsTrigger>
                            <TabsTrigger value="permission">Permission</TabsTrigger>
                        </TabsList>
                        <TabsContent value="template">
                            <MarkdownTemplateSettingPanel
                                markdownSetting={markdownSetting}
                                onClose={onClose}
                            />
                        </TabsContent>
                        <TabsContent value="permission">
                            <MarkdownPermissionSettingPanel
                                markdownSetting={markdownSetting}
                                onClose={onClose}
                            />
                        </TabsContent>
                    </Tabs>
                ) : (
                    <Button
                        type="button"
                        onClick={handleCreateMarkdownSetting}
                    >
                        <Plus className="h-4 w-4" /> Create Markdown Setting
                    </Button>
                )}
            </DialogContent>
        </Dialog>
    );

};
export default MarkdownSettingModal;