"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertMessageWizardSection = exports.renderAlertMessageSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Tabs_1 = require("../../../components/Tabs");
const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const CodeBlock_1 = require("../../../components/CodeBlock");
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const ButtonInfo_1 = require("../../Components/Buttons/ButtonInfo");
const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
const Textarea_1 = tslib_1.__importDefault(require("../../../components/Textarea"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
const Flex_1 = require("../../../components/Flex");
const renderAlertMessageSummary = () => {
    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
        "Message Type ",
        React.createElement(CodeBlock_1.CodeBlock, null, data.MessageType)));
};
exports.renderAlertMessageSummary = renderAlertMessageSummary;
const AlertMessageWizardSection = (props) => {
    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const messageType = data.MessageType;
    const messageText = api.alertApi.internalApi.getAlertDescriptionForDataChange(data);
    const messageHeader = data.MessageHeader;
    const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
    const onMessageTextChange = (e) => {
        const { value } = e.target;
        props.onChange({
            ...data,
            MessageText: value,
        });
    };
    const onMessageHeaderChange = (e) => {
        const { value } = e.target;
        props.onChange({
            ...data,
            MessageHeader: value,
        });
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Tabs_1.Tabs, { "data-name": "message-type" },
            React.createElement(Tabs_1.Tabs.Tab, null, "Message Type"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
                        props.onChange({
                            ...data,
                            MessageType,
                        });
                    } },
                    React.createElement(Radio_1.default, { className: "twa:ml-1", value: "Info" }, "Info"),
                    React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Success" }, "Success"),
                    React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Warning" }, "Warning"),
                    React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Error" }, "Error")))),
        React.createElement(Tabs_1.Tabs, { "data-name": "message-text", className: "twa:mt-2 twa:mb-3", autoFocus: false },
            React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mt-3 twa:mb-2" }, "Text to display as the Alert Message (leave blank to show automated Message based on Alert Type)"),
                React.createElement(FormLayout_1.default, null,
                    React.createElement(FormLayout_1.FormRow, { label: "Header" },
                        React.createElement(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "(Use Default Header Message)", type: 'text', autoFocus: false, value: messageHeader ?? '', 
                            // placeholder="defaults to column name"
                            onChange: (e) => onMessageHeaderChange(e) })),
                    React.createElement(FormLayout_1.FormRow, { label: "Message" },
                        React.createElement(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, type: 'text', autoFocus: false, value: messageText ?? '', onChange: (e) => onMessageTextChange(e) }))),
                showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "alert-message-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
                    React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.AlertMessageDocsLink, '_blank') }),
                    "See how to create dynamic Alert Messages using placeholders"))))));
};
exports.AlertMessageWizardSection = AlertMessageWizardSection;
