import React, { useContext, useState } from "react";
import { AuthContext } from "../../AuthProvider";
import { useNavigate, useParams } from "react-router-dom";
import { useMarkdownTemplate, useSaveMarkdownTemplate } from "../../utils/queries/template-queries";
import LayoutEditor from "./LayoutEditor";
import ParametersManager from "./ParametersManager";
import "bulma/css/bulma.min.css";

const MarkdownTemplateEditor = () => {
    const { roles } = useContext(AuthContext);
    if (!roles.includes("admin") || roles.includes("creator"))
        return <div className="notification is-danger">Permission Denied</div>;

    const navigate = useNavigate();
    const { id } = useParams();
    const { data: template, isFetching: templateIsFetching } = useMarkdownTemplate(id);
    const saveMarkdownTemplate = useSaveMarkdownTemplate();

    const [title, setTitle] = useState(template?.id || "");
    const [parameters, setParameters] = useState(template?.parameters || []);
    const [layout, setLayout] = useState(template?.layout || "");

    if (templateIsFetching) {
        return <p>Loading...</p>;
    }

    const handleSave = () => {
        saveMarkdownTemplate.mutate(
            { id, data: { title, parameters, layout } },
            {
                onSuccess: () => {
                    navigate("/");
                },
                onError: () => {
                    alert("Error saving template.");
                }
            }
        );
    };

    return (
        <section className="section">
            <div className="container">
                <h2 className="title is-4">Markdown Template Editor</h2>
                <div className="field">
                    <label className="label">Title:</label>
                    <div className="control">
                        <input
                            className="input"
                            type="text"
                            placeholder="Enter template title"
                            value={title}
                            onChange={(e) => setTitle(e.target.value)}
                        />
                    </div>
                </div>
                <div className="columns is-variable is-8">
                    <div className="column">
                        <h3 className="title is-5">Layout</h3>
                        <div className="box">
                            <LayoutEditor
                                layout={layout}
                                parameters={parameters}
                                onChange={(newLayout) => setLayout(newLayout)}
                            />
                        </div>
                    </div>
                    <div className="column">
                        <h3 className="title is-5">Parameters</h3>
                        <div className="box">
                            <ParametersManager
                                parameters={parameters}
                                onChange={(newParameters) => setParameters(newParameters)}
                            />
                        </div>
                    </div>
                </div>
                <div className="field is-grouped">
                    <div className="control">
                        <button className="button is-primary" onClick={handleSave}>
                            Save Template
                        </button>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default MarkdownTemplateEditor;