import * as React from 'react';
import { useState } from 'react';
import clsx from 'clsx';
import { CheckBox } from '../../components/CheckBox';
import { ColorPicker } from '../../components/ColorPicker';
import HelpBlock from '../../components/HelpBlock';
import Panel from '../../components/Panel';
import { Tabs } from '../../components/Tabs';
import { Select } from '../../components/Select';
import { StylePreview } from '../../components/StylePreview';
import { Toggle, ToggleGroup } from '../../components/Toggle';
import { FontSize, FontStyle, FontWeight } from '../../AdaptableState/Common/Enums';
import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
import AdaptableInput from './AdaptableInput';
import { Box, Flex } from '../../components/Flex';
import { twMerge } from '../../twMerge';
import { Card } from '../../components/Card';
export const StyleComponent = (props) => {
    const [showClassName, setShowClassName] = useState(StringExtensions.IsNotNullOrEmpty(props.Style.ClassName));
    const componentStyle = props.Style;
    const setComponentStyle = (style) => {
        props.UpdateStyle(style);
    };
    const onShowClassNameChanged = (checked) => {
        const newStyle = { ...componentStyle };
        delete newStyle.BackColor;
        delete newStyle.ForeColor;
        delete newStyle.BorderColor;
        delete newStyle.FontSize;
        delete newStyle.FontStyle;
        delete newStyle.FontWeight;
        newStyle.ClassName = '';
        setComponentStyle(newStyle);
        setShowClassName(checked);
    };
    const onStyleClassNameChanged = (value) => {
        const newStyle = { ...componentStyle };
        newStyle.ClassName = value == 'select' ? '' : value;
        setComponentStyle(newStyle);
    };
    const onUseBackColorCheckChange = (checked) => {
        const newStyle = { ...componentStyle };
        if (checked) {
            newStyle.BackColor = '#ffffff';
        }
        else {
            delete newStyle.BackColor;
        }
        setComponentStyle(newStyle);
    };
    const onUseForeColorCheckChange = (checked) => {
        const newStyle = { ...componentStyle };
        if (checked) {
            newStyle.ForeColor = '#000000';
        }
        else {
            delete newStyle.ForeColor;
        }
        setComponentStyle(newStyle);
    };
    const onUseBorderColorCheckChange = (checked) => {
        const newStyle = { ...componentStyle };
        if (checked) {
            newStyle.BorderColor = '#000000';
        }
        else {
            delete newStyle.BorderColor;
        }
        setComponentStyle(newStyle);
    };
    const onBackColorSelectChange = (color) => {
        const newStyle = { ...componentStyle };
        newStyle.BackColor = color;
        setComponentStyle(newStyle);
    };
    const onForeColorSelectChange = (color) => {
        const newStyle = { ...componentStyle };
        newStyle.ForeColor = color;
        setComponentStyle(newStyle);
    };
    const onBorderColorSelectChange = (color) => {
        const newStyle = { ...componentStyle };
        newStyle.BorderColor = color;
        setComponentStyle(newStyle);
    };
    const onFontWeightChange = (checked) => {
        const newStyle = { ...componentStyle };
        if (checked) {
            newStyle.FontWeight = FontWeight.Bold;
        }
        else {
            delete newStyle.FontWeight;
        }
        setComponentStyle(newStyle);
    };
    const onFontStyleChange = (checked) => {
        const newStyle = { ...componentStyle };
        if (checked) {
            newStyle.FontStyle = FontStyle.Italic;
        }
        else {
            delete newStyle.FontStyle;
        }
        setComponentStyle(newStyle);
    };
    const onTextDecorationChange = (textDecoration) => {
        const newStyle = { ...componentStyle };
        newStyle.TextDecoration = textDecoration;
        if (textDecoration === 'None' || !textDecoration) {
            delete newStyle.TextDecoration;
        }
        setComponentStyle(newStyle);
    };
    const onBorderRadiusChange = (value) => {
        const newStyle = { ...componentStyle };
        newStyle.BorderRadius = value;
        if (value === 0) {
            delete newStyle.BorderRadius;
        }
        setComponentStyle(newStyle);
    };
    const onFontSizeChange = (value) => {
        const newStyle = { ...componentStyle };
        newStyle.FontSize = value;
        if (value === '' || value == 'Default') {
            delete newStyle.FontSize;
        }
        setComponentStyle(newStyle);
    };
    const onAlignmentChange = (alignment) => {
        const newStyle = { ...componentStyle };
        newStyle.Alignment = alignment;
        if (alignment == 'Default') {
            delete newStyle.Alignment;
        }
        setComponentStyle(newStyle);
    };
    const Cmp = props.headless ? Box : Panel;
    const headerText = props.headerText ?? 'Style';
    const cmpProps = props.headless
        ? {}
        : {
            header: headerText,
            'data-name': 'style-component',
        };
    const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
    const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
    const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
    return (React.createElement(Cmp, { ...cmpProps, className: twMerge(clsx('ab-StyleComponent twa:text-3', props.className)) },
        ArrayExtensions.IsNotNullOrEmpty(styleClassNames) ? (React.createElement(Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname') },
            React.createElement(Tabs.Tab, { "data-name": "show-class-name", value: "classname" }, "Use Style Class Name"),
            React.createElement(Tabs.Tab, { "data-name": "create-style", value: "createstyle" }, "Create Style"),
            React.createElement(Tabs.Content, { value: "classname" },
                React.createElement(Card, { shadow: false },
                    React.createElement(Card.Title, null, "CSS Class Name"),
                    React.createElement(Card.Body, { gap: 2, className: "twa:p-1" },
                        React.createElement(HelpBlock, null, "Select a CSS Class Name"),
                        React.createElement(Box, { className: "twa:max-w-[15rem]" },
                            React.createElement(Select, { options: ArrayExtensions.IsNullOrEmpty(styleClassNames)
                                    ? []
                                    : styleClassNames.map((item) => ({
                                        label: item,
                                        value: item,
                                    })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
                        React.createElement(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn" }, 'Please ensure that the styles listed are in the current stylesheet')))),
            React.createElement(Tabs.Content, { value: "createstyle" },
                React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
                    React.createElement(Card, { shadow: false, className: "twa:flex-1" },
                        React.createElement(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
                            React.createElement(Card.Title, { className: "twa:col-span-2" },
                                colourSpellingVariant,
                                " & Border Properties"),
                            React.createElement(HelpBlock, { className: "twa:col-span-2" },
                                "Set ",
                                coloursSpellingVariant,
                                " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
                                coloursSpellingVariant),
                            React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
                                "Back ",
                                colourSpellingVariant),
                            React.createElement(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
                            React.createElement(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
                                "Fore ",
                                colourSpellingVariant),
                            React.createElement(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
                            React.createElement(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
                                "Border ",
                                colourSpellingVariant),
                            React.createElement(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
                            React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
                            React.createElement(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
                                    const number = Number(event.target.value);
                                    if (isNaN(number)) {
                                        onBorderRadiusChange(0);
                                    }
                                    else {
                                        onBorderRadiusChange(number);
                                    }
                                } }),
                            React.createElement(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
                            React.createElement(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
                            React.createElement("span", null, "Font Style"),
                            React.createElement(ToggleGroup, null,
                                React.createElement(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
                                React.createElement(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
                            React.createElement("span", null, "Text Decoration"),
                            React.createElement(ToggleGroup, null,
                                React.createElement(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
                                React.createElement(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
                                React.createElement(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
                            React.createElement("span", null, "Font Size"),
                            React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
                                React.createElement(Select, { placeholder: "Default", options: [
                                        {
                                            label: 'Default',
                                            value: '',
                                        },
                                        ...EnumExtensions.getNames(FontSize).map((enumName) => ({
                                            label: enumName,
                                            value: enumName,
                                        })),
                                    ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
                            React.createElement("span", null, "Alignment"),
                            React.createElement(ToggleGroup, null,
                                React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
                                React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
                                React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))))) : (React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
            React.createElement(Card, { shadow: false, className: "twa:flex-1" },
                React.createElement(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
                    React.createElement(Card.Title, { className: "twa:col-span-2" },
                        colourSpellingVariant,
                        " & Border Properties"),
                    React.createElement(HelpBlock, { className: "twa:col-span-2" },
                        "Set ",
                        coloursSpellingVariant,
                        " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
                        coloursSpellingVariant),
                    React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
                        "Back ",
                        colourSpellingVariant),
                    React.createElement(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
                    React.createElement(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
                        "Fore ",
                        colourSpellingVariant),
                    React.createElement(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
                    React.createElement(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
                        "Border ",
                        colourSpellingVariant),
                    React.createElement(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
                    React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
                    React.createElement(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
                            const number = Number(event.target.value);
                            if (isNaN(number)) {
                                onBorderRadiusChange(0);
                            }
                            else {
                                onBorderRadiusChange(number);
                            }
                        } }),
                    React.createElement(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
                    React.createElement(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
                    React.createElement("span", null, "Font Style"),
                    React.createElement(ToggleGroup, null,
                        React.createElement(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
                        React.createElement(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
                    React.createElement("span", null, "Text Decoration"),
                    React.createElement(ToggleGroup, null,
                        React.createElement(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
                        React.createElement(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
                        React.createElement(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
                    React.createElement("span", null, "Font Size"),
                    React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
                        React.createElement(Select, { placeholder: "Default", options: [
                                {
                                    label: 'Default',
                                    value: '',
                                },
                                ...EnumExtensions.getNames(FontSize).map((enumName) => ({
                                    label: enumName,
                                    value: enumName,
                                })),
                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
                    React.createElement("span", null, "Alignment"),
                    React.createElement(ToggleGroup, null,
                        React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
                        React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
                        React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))),
        !props.hidePreview && (React.createElement(Card, { shadow: false },
            React.createElement(Card.Title, null, "Preview"),
            React.createElement(Card.Body, { className: "twa:grid twa:place-items-center" },
                React.createElement(Box, { className: "twa:p-2 twa:inline-block" },
                    React.createElement(StylePreview, { className: "twa:mt-0", styleObject: componentStyle })))))));
};
