import {useUpdatePath} from "../../utils/queries/path-queries";
import {useCreatePathSetting, usePathSetting} from "../../utils/queries/path-setting-queries";
import WebhookSettingPanel from "../Settings/PathSettings/WebhookSettingPanel";
import React, {useState} from "react";
const PathSettingModal = ({ isOpen, path, onClose }) => {
    const {data: pathSetting, isLoading: isPathSettingLoading} = usePathSetting(path?.setting_id || 0);
    const createPathSetting = useCreatePathSetting();
    const updatePath = useUpdatePath();

    const [activeTab, setActiveTab] = useState("webhook");
    const handleCreatePathSetting = () => {
        createPathSetting.mutate({}, {
            onSuccess: (res) => {
                updatePath.mutate({id: path.id, data: {setting_id: res.id}});
            }
        });
    };


    if(isPathSettingLoading)
        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">Path Settings</p>
                    <button
                        type="button"
                        className="delete"
                        aria-label="close"
                        onClick={onClose}
                    />
                </header>
                {!pathSetting ? (
                    <section className="modal-card-body">
                        <button
                            type="button"
                            className="button is-primary"
                            onClick={handleCreatePathSetting}
                        >
                            Create Path Setting
                        </button>
                    </section>
                ) : (
                    <section className="modal-card-body">
                        <div className="tabs">
                            <ul>
                                <li className={activeTab === "webhook" ? "is-active" : ""}>
                                    <a onClick={() => setActiveTab("webhook")}>Webhook</a>
                                </li>
                                <li className={activeTab === "template" ? "is-active" : ""}>
                                    <a onClick={() => setActiveTab("template")}>Template</a>
                                </li>
                            </ul>
                        </div>
                        {activeTab === "webhook" && (
                            <WebhookSettingPanel
                                pathSetting={pathSetting}
                                onClose={onClose}
                            />
                        )}
                        {activeTab === "template" && (
                            <div></div>
                        )}
                    </section>
                )}

            </div>
        </div>
    );

};

export default PathSettingModal;