"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeGenerator = void 0;
const tslib_1 = require("tslib");
const ui_kit_1 = require("@stoplight/ui-kit");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const copy_to_clipboard_1 = tslib_1.__importDefault(require("copy-to-clipboard"));
const mobx_1 = require("mobx");
const React = tslib_1.__importStar(require("react"));
const useRequestMaker_1 = require("../../../hooks/useRequestMaker");
const httpSnippetLanguages_1 = require("./httpSnippetLanguages");
const defaultLibrary = httpSnippetLanguages_1.languages[0].libraries ? httpSnippetLanguages_1.languages[0].libraries[0] : undefined;
const defaultLanguage = {
    codechoice: httpSnippetLanguages_1.languages[0].codechoice,
    librarychoice: defaultLibrary ? defaultLibrary.librarychoice : undefined,
    mode: httpSnippetLanguages_1.languages[0].mode,
    text: defaultLibrary ? `${httpSnippetLanguages_1.languages[0].name} / ${defaultLibrary.name}` : httpSnippetLanguages_1.languages[0].name,
};
exports.CodeGenerator = ({ className }) => {
    const requestStore = useRequestMaker_1.useRequestMakerStore('request');
    const [currentLanguage, setCurrentLanguage] = React.useState(defaultLanguage);
    const [generatedCode, setGeneratedCode] = React.useState('');
    React.useEffect(() => {
        return mobx_1.autorun(() => {
            setGeneratedCode(requestStore.generateCode(currentLanguage.codechoice, currentLanguage.librarychoice));
        });
    }, [currentLanguage.codechoice, currentLanguage.librarychoice, requestStore]);
    const hasError = generatedCode === null;
    return (React.createElement("div", { className: classnames_1.default(className, 'flex flex-col') },
        React.createElement("div", { className: "flex items-center mx-5 mt-5" },
            React.createElement(ui_kit_1.Popover, { autoFocus: false, content: React.createElement(ui_kit_1.Menu, null, httpSnippetLanguages_1.languages.map(item => {
                    var _a;
                    return (React.createElement(ui_kit_1.MenuItem, { active: item.codechoice === currentLanguage.codechoice, text: item.name, key: item.name, onClick: () => {
                            if (!item.libraries) {
                                setCurrentLanguage({
                                    codechoice: item.codechoice,
                                    librarychoice: '',
                                    mode: item.mode,
                                    text: item.name,
                                });
                                setGeneratedCode(requestStore.generateCode(item.codechoice));
                            }
                        } }, (_a = item.libraries) === null || _a === void 0 ? void 0 : _a.map(library => (React.createElement(ui_kit_1.MenuItem, { active: library.librarychoice === currentLanguage.librarychoice, text: library.name, key: library.name, onClick: () => {
                            setCurrentLanguage({
                                codechoice: item.codechoice,
                                librarychoice: library.librarychoice,
                                mode: item.mode,
                                text: `${item.name} / ${library.name}`,
                            });
                            setGeneratedCode(requestStore.generateCode(item.codechoice, library.librarychoice));
                        } })))));
                })), position: ui_kit_1.Position.BOTTOM, minimal: true, boundary: 'window' },
                React.createElement(ui_kit_1.Button, { rightIcon: "caret-down", text: currentLanguage.text })),
            !hasError && (React.createElement(ui_kit_1.Button, { className: "ml-3", icon: "duplicate", text: "Copy to Clipboard", onClick: () => {
                    var _a;
                    copy_to_clipboard_1.default(generatedCode || '');
                    if (typeof window !== 'undefined') {
                        try {
                            const elem = window.document.getElementById('request-generated-code');
                            if (elem) {
                                (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.selectAllChildren(elem);
                            }
                        }
                        catch (error) {
                            console.error(error);
                        }
                    }
                } }))),
        hasError ? (React.createElement("div", { className: "p-10 text-center text-gray-6" },
            "There was an error generating the code for ",
            currentLanguage.text,
            ". Try editing your request or picking a different language.")) : (React.createElement(ui_kit_1.CodeViewer, { id: "request-generated-code", className: "m-5", language: currentLanguage.mode, value: generatedCode || '', showLineNumbers: true }))));
};
//# sourceMappingURL=CodeGenerator.js.map