import React, { useState, useEffect, } from "react";
import Modal, { ModalWidth } from "../Modal/Modal";
import AILoader from "./AILoader";
import Alert, { AlertType } from "../Alerts/Alert";
import ButtonType from "../Button/ButtonTypes";
import { ButtonStyleType } from "../Button/Button";
import IconProp from "../../../Types/Icon/IconProp";
import Dropdown from "../Dropdown/Dropdown";
import MarkdownEditor from "../Markdown.tsx/MarkdownEditor";
const GenerateFromAIModal = (props) => {
    var _a;
    const [isGenerating, setIsGenerating] = useState(false);
    const [error, setError] = useState("");
    const [selectedTemplateId, setSelectedTemplateId] = useState(((_a = props.templates[0]) === null || _a === void 0 ? void 0 : _a.id) || "");
    const [templateContent, setTemplateContent] = useState("");
    // Build dropdown options
    const templateOptions = props.templates.map((template) => {
        return {
            label: template.name,
            value: template.id,
        };
    });
    // Update template content when selection changes
    useEffect(() => {
        if (selectedTemplateId) {
            const selectedTemplate = props.templates.find((t) => {
                return t.id === selectedTemplateId;
            });
            setTemplateContent((selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.content) || "");
        }
        else {
            setTemplateContent("");
        }
    }, [selectedTemplateId]);
    const handleGenerate = async () => {
        setIsGenerating(true);
        setError("");
        try {
            const requestData = {};
            // Use the edited template content if a template was selected
            if (selectedTemplateId && templateContent) {
                requestData.template = templateContent;
                requestData.templateId = selectedTemplateId;
            }
            const generatedContent = await props.onGenerate(requestData);
            props.onSuccess(generatedContent);
        }
        catch (err) {
            if (err instanceof Error) {
                setError(err.message);
            }
            else {
                setError("An error occurred while generating content.");
            }
        }
        finally {
            setIsGenerating(false);
        }
    };
    return (React.createElement(Modal, { title: props.title, description: props.description ||
            "Generate content using AI based on the available data.", onClose: () => {
            if (!isGenerating) {
                props.onClose();
            }
        }, submitButtonText: isGenerating ? "Generating..." : "Generate with AI", submitButtonStyleType: ButtonStyleType.PRIMARY, submitButtonType: ButtonType.Button, isLoading: isGenerating, disableSubmitButton: isGenerating, onSubmit: handleGenerate, modalWidth: ModalWidth.Large, icon: IconProp.Bolt },
        React.createElement(React.Fragment, null,
            error && (React.createElement(Alert, { type: AlertType.DANGER, strongTitle: "Error", title: error, className: "mb-4" })),
            isGenerating && React.createElement(AILoader, null),
            !isGenerating && (React.createElement("div", { className: "space-y-4" },
                React.createElement("div", null,
                    React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Select Template"),
                    React.createElement(Dropdown, { options: templateOptions, value: templateOptions.find((opt) => {
                            return opt.value === selectedTemplateId;
                        }), onChange: (value) => {
                            setSelectedTemplateId(value || "");
                        }, placeholder: "Select a template..." }),
                    React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Choose a template to guide the AI generation. You can edit it below before generating.")),
                selectedTemplateId && (React.createElement("div", null,
                    React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Template Preview"),
                    React.createElement("p", { className: "text-xs text-gray-500 mb-2" }, "Edit the template below. AI will fill in the sections with incident data."),
                    React.createElement("div", { className: "" },
                        React.createElement(MarkdownEditor, { key: selectedTemplateId, initialValue: templateContent, onChange: (value) => {
                                setTemplateContent(value);
                            }, placeholder: "Template content..." })))))))));
};
export default GenerateFromAIModal;
//# sourceMappingURL=GenerateFromAIModal.js.map