HangmanLab.Frontend/src/components/Settings/MarkdownSettings/MarkdownPermissionSettingPanel.js

import {
    useCreateMarkdownPermissionSetting,
    useMarkdownPermissionSetting,
    useUpdateMarkdownPermissionSetting
} from "../../../utils/queries/markdown-permission-setting-queries";
import React, {useEffect, useState} from "react";
import { Plus, Save } from "lucide-react";
import {useUpdateMarkdownSetting} from "../../../utils/queries/markdown-setting-queries";
import { Button } from "../../ui/button";
import { Label } from "../../ui/input";
import { Spinner } from "../../ui/misc";

const SELECT_CLASS =
    "flex h-9 w-full rounded-md border border-input bg-background/60 px-3 py-1 text-sm text-foreground transition-colors focus-visible:outline-none focus-visible:border-primary/60 focus-visible:ring-2 focus-visible:ring-ring/40";

const MarkdownPermissionSettingPanel = ({markdownSetting, onClose}) => {
    const {data: setting, isFetching: settingIsFetching } = useMarkdownPermissionSetting(markdownSetting?.permission_setting_id);
    const [permission, setPermission] = useState("");

    const createMarkdownPermissionSetting = useCreateMarkdownPermissionSetting();
    const updateMarkdownSetting = useUpdateMarkdownSetting();
    const updateMarkdownPermissionSetting = useUpdateMarkdownPermissionSetting();

    useEffect(() => {
        if (setting && setting.permission !== undefined && setting.permission !== null) {
            setPermission(setting.permission);
        }
    }, [setting]);

    const handleCreatePermissionSetting = () => {
        createMarkdownPermissionSetting.mutate({permission: null}, {
           onSuccess: (data) => {
               updateMarkdownSetting.mutate({
                   id: markdownSetting.id,
                   data: {
                       permission_setting_id: data.id,
                   }
               });
           }
        });
    };

    const handleSaveMarkdownPermissionSetting = () => {
        const permissionValue = permission === "" ? null : permission;

        updateMarkdownPermissionSetting.mutate({
            id: setting.id,
            data: {
                permission: permissionValue,
            }
        }, {
            onSuccess: () => alert("Saved"),
            onError: () => alert("Failed to save"),
        });
        onClose();
    };

    if (settingIsFetching) {
        return (
            <div className="flex justify-center py-6">
                <Spinner label="Loading permission" />
            </div>
        );
    }

    return setting ? (
        <div className="mt-4 space-y-4 rounded-lg border border-border bg-surface/40 p-5">
            <h4 className="font-mono text-sm font-semibold uppercase tracking-wide text-foreground">
                Permission Setting
            </h4>
            <div className="space-y-2">
                <Label htmlFor="permission-select">Permission</Label>
                <select
                    id="permission-select"
                    className={SELECT_CLASS}
                    value={permission}
                    onChange={(e) => setPermission(e.target.value)}
                >
                    <option value="">(None)</option>
                    <option value="public">public</option>
                    <option value="protected">protected</option>
                    <option value="private">private</option>
                </select>
            </div>
            <Button
                type="button"
                onClick={handleSaveMarkdownPermissionSetting}
            >
                <Save className="h-4 w-4" /> Save Permission Setting
            </Button>
        </div>
    ) : (
        <Button
            type="button"
            onClick={handleCreatePermissionSetting}
        >
            <Plus className="h-4 w-4" /> Create Permission Setting
        </Button>
    );
};

export default MarkdownPermissionSettingPanel;