import * as React from 'react';
import { convertAdaptableStyleToCSS } from '../../../Utilities/Helpers/StyleHelper';
import { StyleComponent } from '../../Components/StyleComponent';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import UIHelper from '../../UIHelper';
import { Box } from '../../../components/Flex';
export const isFormatColumnStyleValid = (data, api) => {
    if (data.Style &&
        UIHelper.IsEmptyStyle(data.Style) &&
        data.DisplayFormat === undefined &&
        !api.columnScopeApi.isSingleBooleanColumnScope(data.Scope)) {
        return 'No format applied';
    }
    return true;
};
const toStyle = (data) => {
    return {
        ...convertAdaptableStyleToCSS(data.Style ?? {}),
        borderWidth: data.Style?.BorderColor ? 2 : 0,
        borderStyle: 'solid',
        // ToDO abcdefg
        textAlign: data.Style?.Alignment ? data.Style.Alignment.toLowerCase() : undefined,
    };
};
export const renderFormatColumnStyleWizardSummary = (data) => {
    const { api } = useOnePageAdaptableWizardContext();
    return renderFormatColumnStyleSummary(data, api);
};
export const renderFormatColumnStyleSummary = (data, api) => {
    return (React.createElement(Box, { className: "ab-FormatPreview twa:p-2", style: toStyle(data) }, "Preview result"));
};
export function FormatColumnStyleWizardSection(props) {
    const { data, api } = useOnePageAdaptableWizardContext();
    return (React.createElement(StyleComponent, { headless: true, api: api, Style: data.Style ?? {}, UpdateStyle: (Style) => {
            props.onChange({ ...data, Style });
        } }));
}
