"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyleComponent = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const CheckBox_1 = require("../../components/CheckBox");
const ColorPicker_1 = require("../../components/ColorPicker");
const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
const Select_1 = require("../../components/Select");
const StylePreview_1 = require("../../components/StylePreview");
const Toggle_1 = require("../../components/Toggle/Toggle");
const ToggleGroup_1 = require("../../components/Toggle/ToggleGroup");
const Enums_1 = require("../../AdaptableState/Common/Enums");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
const AdaptableInput_1 = tslib_1.__importDefault(require("./AdaptableInput"));
class StyleComponent extends React.Component {
    constructor(props) {
        super(props);
        this.onShowClassNameChanged = (checked) => {
            this.setState((state) => {
                const newState = { ...state };
                delete newState.componentStyle.BackColor;
                delete newState.componentStyle.ForeColor;
                delete newState.componentStyle.BorderColor;
                delete newState.componentStyle.FontSize;
                delete newState.componentStyle.FontStyle;
                delete newState.componentStyle.FontWeight;
                newState.componentStyle.ClassName = '';
                newState.ShowClassName = checked;
                return newState;
            });
        };
        this.state = {
            componentStyle: this.props.Style,
            ShowClassName: StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.Style.ClassName),
        };
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        return {
            componentStyle: nextProps.Style,
        };
    }
    render() {
        const Cmp = this.props.headless ? rebass_1.Box : Panel_1.default;
        const headerText = this.props.headerText ?? 'Style';
        const cmpProps = this.props.headless
            ? {}
            : {
                header: headerText,
                margin: 2,
                'data-name': 'style-component',
            };
        const styleClassNames = this.props.api.userInterfaceApi.getStyleClassNames();
        const colourSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('Colour');
        const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
        let fontSizes = ['Default'];
        fontSizes.push(...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize));
        return (React.createElement(Cmp, { ...cmpProps, className: "ab-StyleComponent" },
            ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
                React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "classname", checked: this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(true) }, "Use Style Class Name"),
                ' ',
                React.createElement(Radio_1.default, { "data-name": "create-style", marginLeft: 3, value: "expression", checked: !this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(false) }, "Create Style"),
                ' ')),
            this.state.ShowClassName ? (React.createElement("div", null,
                React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'Select a CSS Class Name'),
                React.createElement(rebass_1.Box, { style: { maxWidth: '15rem' }, m: 3 },
                    React.createElement(Select_1.Select, { options: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
                            ? []
                            : styleClassNames.map((item) => ({
                                label: item,
                                value: item,
                            })), value: this.state.componentStyle.ClassName, onChange: (value) => this.onStyleClassNameChanged(value) })),
                React.createElement(rebass_1.Text, { color: 'var(--ab-color-warn)', style: { flex: 2 }, margin: 2 }, 'Please ensure that the styles listed are in the current stylesheet'))) : (React.createElement(rebass_1.Flex, { flexDirection: "column" },
                React.createElement(rebass_1.Flex, { flex: 1 },
                    React.createElement("div", null,
                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 },
                            "Set ",
                            coloursSpellingVariant,
                            " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
                            coloursSpellingVariant),
                        React.createElement(FormLayout_1.default, { columns: [1, 2] },
                            React.createElement(FormLayout_1.FormRow, null,
                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
                                    "Back ",
                                    colourSpellingVariant),
                                this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
                            React.createElement(FormLayout_1.FormRow, null,
                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
                                    "Fore ",
                                    colourSpellingVariant),
                                this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
                            React.createElement(FormLayout_1.FormRow, null,
                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
                                    "Border ",
                                    colourSpellingVariant),
                                this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
                        React.createElement(FormLayout_1.default, null,
                            React.createElement(FormLayout_1.FormRow, { label: "Font Style" },
                                React.createElement(ToggleGroup_1.ToggleGroup, null,
                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => this.onFontStyleChange(checked), icon: "italic" }),
                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => this.onFontWeightChange(checked), icon: "bold" }))),
                            React.createElement(FormLayout_1.FormRow, { label: "Text Decoration" },
                                React.createElement(ToggleGroup_1.ToggleGroup, null,
                                    React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: this.state.componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Underline' : 'None') }),
                                    React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: this.state.componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
                                    React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: this.state.componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Overline' : 'None') }))),
                            React.createElement(FormLayout_1.FormRow, { label: "Font Size" }, !this.props.showFontSizeAs || this.props.showFontSizeAs === 'dropdown' ? (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
                                React.createElement(Select_1.Select, { placeholder: "Default", options: [
                                        {
                                            label: 'Default',
                                            value: '',
                                        },
                                        ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
                                            label: enumName,
                                            value: enumName,
                                        })),
                                    ], value: this.state.componentStyle.FontSize?.toString() ?? '', onChange: (value) => this.onFontSizeChange(value) }))) : (React.createElement(rebass_1.Box, null, fontSizes.map((enumName) => {
                                return (React.createElement(Radio_1.default, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
                                        this.state.componentStyle.FontSize === enumName, mr: 3, key: enumName }, enumName));
                            })))),
                            React.createElement(FormLayout_1.FormRow, { label: "Border Radius" },
                                React.createElement(AdaptableInput_1.default, { width: "100px", type: "number", min: "0", value: this.state.componentStyle.BorderRadius, onChange: (event) => {
                                        const number = Number(event.target.value);
                                        if (isNaN(number)) {
                                            this.onBorderRadiusChange(0);
                                        }
                                        else {
                                            this.onBorderRadiusChange(number);
                                        }
                                    } }))))))),
            !this.props.hidePreview && (React.createElement(rebass_1.Box, null,
                React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
                React.createElement(StylePreview_1.StylePreview, { styleObject: this.state.componentStyle })))));
    }
    onStyleClassNameChanged(value) {
        this.state.componentStyle.ClassName = value == 'select' ? '' : value;
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onUseBackColorCheckChange(checked) {
        if (checked) {
            this.state.componentStyle.BackColor = '#ffffff';
        }
        else {
            delete this.state.componentStyle.BackColor;
        }
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onUseForeColorCheckChange(checked) {
        if (checked) {
            this.state.componentStyle.ForeColor = '#000000';
        }
        else {
            delete this.state.componentStyle.ForeColor;
        }
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onUseBorderColorCheckChange(checked) {
        if (checked) {
            this.state.componentStyle.BorderColor = '#000000';
        }
        else {
            delete this.state.componentStyle.BorderColor;
        }
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onUseFontSizeCheckChange(checked) {
        if (checked) {
            this.state.componentStyle.FontSize = Enums_1.FontSize.Medium;
        }
        else {
            delete this.state.componentStyle.FontSize;
        }
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onBackColorSelectChange(color) {
        this.state.componentStyle.BackColor = color;
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onForeColorSelectChange(color) {
        this.state.componentStyle.ForeColor = color;
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onBorderColorSelectChange(color) {
        this.state.componentStyle.BorderColor = color;
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onFontWeightChange(checked) {
        if (checked) {
            this.state.componentStyle.FontWeight = Enums_1.FontWeight.Bold;
        }
        else {
            delete this.state.componentStyle.FontWeight;
        }
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onFontStyleChange(checked) {
        if (checked) {
            this.state.componentStyle.FontStyle = Enums_1.FontStyle.Italic;
        }
        else {
            delete this.state.componentStyle.FontStyle;
        }
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onTextDecorationChange(textDecoration) {
        this.state.componentStyle.TextDecoration = textDecoration;
        if (textDecoration === 'None' || !textDecoration) {
            delete this.state.componentStyle.TextDecoration;
        }
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onBorderRadiusChange(value) {
        this.state.componentStyle.BorderRadius = value;
        if (value === 0) {
            delete this.state.componentStyle.BorderRadius;
        }
        this.props.UpdateStyle(this.state.componentStyle);
    }
    onFontSizeChange(value) {
        this.state.componentStyle.FontSize = value;
        if (value === '' || value == 'Default') {
            delete this.state.componentStyle.FontSize;
        }
        this.props.UpdateStyle(this.state.componentStyle);
    }
}
exports.StyleComponent = StyleComponent;
