import {useCreateMarkdownSetting, useMarkdownSetting} from "../../utils/queries/markdown-setting-queries";
import {useSaveMarkdown} from "../../utils/queries/markdown-queries";
import React, {useState} from "react";
import MarkdownTemplateSettingPanel from "../Settings/MarkdownSettings/MarkdownTemplateSettingPanel";

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
                    }
                });
            }
        });
    };

    if(markdownSettingIsFetching)
        return(<p>Loading...</p>);

    return (
        <div className={`modal ${isOpen ? "is-active" : ""}`}>
            <div className="modal-background" onClick={onClose} />
            <div className="modal-card" style={{width: "60vw"}}>
                <header className="modal-card-head">
                    <p className="modal-card-title">Markdown Settings</p>
                    <button
                        className="delete"
                        type="button"
                        aria-label="close"
                        onClick={onClose}
                    />
                </header>
                {
                    markdownSetting ?  (
                        <section className="modal-card-body">
                            <div className="tabs">
                                <ul>
                                    <li className={activeTab==="template" ? "is-active" : ""}>
                                        <a onClick={() => setActiveTab("template")}>Template</a>
                                    </li>
                                </ul>
                            </div>
                            {activeTab === "template" && (
                                <MarkdownTemplateSettingPanel
                                    markdownSetting={markdownSetting}
                                    onClose={onClose}
                                />
                            )}
                        </section>
                    ) : (
                        <section className="modal-card-body">
                            <button
                                className="button is-primary"
                                type="button"
                                onClick={handleCreateMarkdownSetting}
                            >
                                Create Markdown Setting
                            </button>
                        </section>
                    )
                }
            </div>
        </div>
    );

};
export default MarkdownSettingModal;