import * as React from 'react';
import { Tabs } from '../../../components/Tabs';
import Radio, { RadioGroup } from '../../../components/Radio';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { CodeBlock } from '../../../components/CodeBlock';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { ButtonInfo } from '../../Components/Buttons/ButtonInfo';
import { AlertMessageDocsLink } from '../../../Utilities/Constants/DocumentationLinkConstants';
import Textarea from '../../../components/Textarea';
import HelpBlock from '../../../components/HelpBlock';
import { Box } from '../../../components/Flex';
export const renderAlertMessageSummary = () => {
    const { data } = useOnePageAdaptableWizardContext();
    return (React.createElement(Box, { className: "twa:text-2" },
        "Message Type ",
        React.createElement(CodeBlock, null, data.MessageType)));
};
export const AlertMessageWizardSection = (props) => {
    const { data, api } = 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, { "data-name": "message-type" },
            React.createElement(Tabs.Tab, null, "Message Type"),
            React.createElement(Tabs.Content, null,
                React.createElement(RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
                        props.onChange({
                            ...data,
                            MessageType,
                        });
                    } },
                    React.createElement(Radio, { className: "twa:ml-1", value: "Info" }, "Info"),
                    React.createElement(Radio, { className: "twa:ml-4", value: "Success" }, "Success"),
                    React.createElement(Radio, { className: "twa:ml-4", value: "Warning" }, "Warning"),
                    React.createElement(Radio, { className: "twa:ml-4", value: "Error" }, "Error")))),
        React.createElement(Tabs, { "data-name": "message-text", className: "twa:mt-2 twa:mb-3", autoFocus: false },
            React.createElement(Tabs.Tab, null, "Message Text"),
            React.createElement(Tabs.Content, null,
                React.createElement(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, null,
                    React.createElement(FormRow, { label: "Header" },
                        React.createElement(Textarea, { 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(FormRow, { label: "Message" },
                        React.createElement(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, type: 'text', autoFocus: false, value: messageText ?? '', onChange: (e) => onMessageTextChange(e) }))),
                showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "alert-message-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
                    React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(AlertMessageDocsLink, '_blank') }),
                    "See how to create dynamic Alert Messages using placeholders"))))));
};
