import {
    Widget,
    Label,
    shortcut,
    each,
    Msg,
    StyleLoaders,
    ColorChooser,
    VerticalAdaptLayout,
    HTapeLayout,
    TextButton,
    IconTextItem,
    VerticalLayout,
    Button,
    DownListCombo,
    IconTextIconItem,
    GridLayout,
    Layout,
} from '@fui/core';

@shortcut()
export class Face extends Widget {
    static xtype = 'demo.face';

    props = {
        baseCls: 'demo-face',
    };

    _createLabel(text) {
        return {
            width: 200,
            el: {
                type: Label.xtyp,
                text: text,
                textAlign: 'left',
                hgap: 5,
                height: 40,
                cls: 'config-label',
            },
        };
    }

    _createColorPicker(ref, action) {
        return {
            el: {
                type: VerticalAdaptLayout.xtype,
                items: [
                    {
                        type: ColorChooser.xtype,
                        listeners: [
                            {
                                eventName: ColorChooser.EVENT_CHANGE,
                                action: action,
                            },
                        ],
                        ref: ref,
                        width: 24,
                        height: 24,
                    },
                ],
            },
        };
    }

    _createBackgroundConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('背景色：'),
                this._createColorPicker(
                    function () {
                        self.backgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
            ],
        };
    }

    _createFontConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('字体颜色：'),
                this._createColorPicker(
                    function () {
                        self.fontColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
            ],
        };
    }

    _createActiveFontConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('激活状态字体颜色：'),
                this._createColorPicker(
                    function () {
                        self.activeFontColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: TextButton.xtype,
                        cls: 'bi-list-item-active',
                        text: '测试激活状态',
                    },
                },
            ],
        };
    }

    _createSelectFontConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('选中状态字体颜色：'),
                this._createColorPicker(
                    function () {
                        self.selectFontColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: TextButton.xtype,
                        cls: 'bi-list-item-active',
                        text: '测试选中状态',
                    },
                },
            ],
        };
    }

    _createGrayFontConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('tip提示字体颜色：'),
                this._createColorPicker(
                    function () {
                        self.grayFontColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: IconTextItem.xtype,
                        cls: 'bi-tips copy-font',
                        height: 40,
                        text: '测试提示文字',
                    },
                },
            ],
        };
    }

    _createDisableFontConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('灰化字体颜色：'),
                this._createColorPicker(
                    function () {
                        self.disabledFontColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: TextButton.xtype,
                        text: '这个按钮是灰化的',
                        disabled: true,
                    },
                },
            ],
        };
    }

    _createCardBackgroundConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('Card背景颜色：'),
                this._createColorPicker(
                    function () {
                        self.cardBackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
            ],
        };
    }

    _createHoverBackgroundColor() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('悬浮状态背景颜色：'),
                this._createColorPicker(
                    function () {
                        self.hoverBackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: TextButton.xtype,
                        cls: 'bi-list-item-active',
                        text: '测试悬浮状态',
                    },
                },
            ],
        };
    }

    _createActiveBackgroundColor() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('激活状态背景颜色：'),
                this._createColorPicker(
                    function () {
                        self.activeBackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: TextButton.xtype,
                        cls: 'bi-list-item-active',
                        text: '测试激活状态',
                    },
                },
            ],
        };
    }

    _createSelectBackgroundColor() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('选中状态背景颜色：'),
                this._createColorPicker(
                    function () {
                        self.selectBackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: TextButton.xtype,
                        cls: 'bi-list-item-active',
                        text: '测试选中状态',
                    },
                },
            ],
        };
    }

    _createSlitColor() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('分割线颜色：'),
                this._createColorPicker(
                    function () {
                        self.slitColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
            ],
        };
    }

    _createBaseConfig() {
        return {
            type: VerticalLayout.xtype,
            items: [
                this._createLabel('--通用配色--'),
                this._createBackgroundConfig(),
                this._createCardBackgroundConfig(),
                this._createFontConfig(),
                this._createActiveFontConfig(),
                this._createSelectFontConfig(),
                this._createGrayFontConfig(),
                this._createDisableFontConfig(),
                this._createHoverBackgroundColor(),
                this._createActiveBackgroundColor(),
                this._createSelectBackgroundColor(),
                this._createSlitColor(),
            ],
        };
    }

    _createButton1BackgroundConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('按钮背景色1：'),
                this._createColorPicker(
                    function () {
                        self.button1BackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: VerticalAdaptLayout.xtype,
                        height: 40,
                        items: [
                            {
                                type: Button.xtype,
                                cls: 'config-button1',
                                text: '测试按钮',
                            },
                        ],
                    },
                },
            ],
        };
    }

    _createButton2BackgroundConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('按钮背景色2：'),
                this._createColorPicker(
                    function () {
                        self.button2BackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: VerticalAdaptLayout.xtype,
                        height: 40,
                        items: [
                            {
                                type: Button.xtype,
                                level: 'success',
                                cls: 'config-button2',
                                text: '测试按钮',
                            },
                        ],
                    },
                },
            ],
        };
    }

    _createButton3BackgroundConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('按钮背景色3：'),
                this._createColorPicker(
                    function () {
                        self.button3BackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: VerticalAdaptLayout.xtype,
                        height: 40,
                        items: [
                            {
                                type: Button.xtype,
                                level: 'warning',
                                cls: 'config-button3',
                                text: '测试按钮',
                            },
                        ],
                    },
                },
            ],
        };
    }

    _createButton4BackgroundConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('按钮背景色4：'),
                this._createColorPicker(
                    function () {
                        self.button4BackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: VerticalAdaptLayout.xtype,
                        height: 40,
                        items: [
                            {
                                type: Button.xtype,
                                level: 'ignore',
                                cls: 'config-button4',
                                text: '测试按钮',
                            },
                        ],
                    },
                },
            ],
        };
    }

    _createScrollBackgroundConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('滚动条底色：'),
                this._createColorPicker(
                    function () {
                        self.scrollBackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
            ],
        };
    }

    _createScrollThumbConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('滚动条thumb颜色：'),
                this._createColorPicker(
                    function () {
                        self.scrollThumbColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
            ],
        };
    }

    _createPopupBackgroundConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('下拉框背景颜色：'),
                this._createColorPicker(
                    function () {
                        self.popupBackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: VerticalAdaptLayout.xtype,
                        items: [
                            {
                                type: DownListCombo.xtype,
                                items: [
                                    [
                                        {
                                            el: {
                                                text: 'column 1111',
                                                iconCls1: 'check-mark-e-font',
                                                value: 11,
                                            },
                                            children: [
                                                {
                                                    text: 'column 1.1',
                                                    value: 21,
                                                    cls: 'dot-e-font',
                                                    selected: true,
                                                },
                                                {
                                                    text: 'column 1.222222222222222222222222222222222222',
                                                    cls: 'dot-e-font',
                                                    value: 22,
                                                },
                                                {
                                                    text: 'column 1.3',
                                                    cls: 'dot-e-font',
                                                    value: 23,
                                                },
                                                {
                                                    text: 'column 1.4',
                                                    cls: 'dot-e-font',
                                                    value: 24,
                                                },
                                                {
                                                    text: 'column 1.5',
                                                    cls: 'dot-e-font',
                                                    value: 25,
                                                },
                                            ],
                                        },
                                    ],
                                    [
                                        {
                                            el: {
                                                type: IconTextIconItem.xtype,
                                                text: 'column 2',
                                                iconCls1: 'chart-type-e-font',
                                                cls: 'dot-e-font',
                                                value: 12,
                                            },
                                            disabled: true,
                                            children: [
                                                {
                                                    type: IconTextItem.xtype,
                                                    cls: 'dot-e-font',
                                                    height: 25,
                                                    text: 'column 2.1',
                                                    value: 11,
                                                },
                                                { text: 'column 2.2', value: 12, cls: 'dot-e-font' },
                                            ],
                                        },
                                    ],
                                    [
                                        {
                                            text: 'column 33333333333333333333333333333333',
                                            cls: 'style-set-e-font',
                                            value: 13,
                                        },
                                    ],
                                    [
                                        {
                                            text: 'column 4',
                                            cls: 'filter-e-font',
                                            value: 14,
                                        },
                                    ],
                                    [
                                        {
                                            text: 'column 5',
                                            cls: 'copy-e-font',
                                            value: 15,
                                        },
                                    ],
                                    [
                                        {
                                            text: 'column 6',
                                            cls: 'delete-e-font',
                                            value: 16,
                                        },
                                    ],
                                    [
                                        {
                                            text: 'column 7',
                                            cls: 'dimension-from-e-font',
                                            value: 17,
                                            disabled: true,
                                        },
                                    ],
                                ],
                            },
                        ],
                    },
                },
            ],
        };
    }

    _createMaskBackgroundConfig() {
        var self = this;
        return {
            type: HTapeLayout.xtype,
            cls: 'config-item bi-border-bottom',
            height: 40,
            items: [
                this._createLabel('弹出层蒙版颜色：'),
                this._createColorPicker(
                    function () {
                        self.maskBackgroundColor = this;
                    },
                    function () {
                        self._runGlobalStyle();
                    }
                ),
                {
                    width: 100,
                    el: {
                        type: VerticalAdaptLayout.xtype,
                        items: [
                            {
                                type: Button.xtype,
                                text: 'mask测试',
                                handler() {
                                    Msg.alert('弹出层', '弹出层面板');
                                },
                            },
                        ],
                    },
                },
            ],
        };
    }

    _createCommonConfig() {
        return {
            type: VerticalLayout.xtype,
            items: [
                this._createLabel('--一般配色--'),
                this._createButton1BackgroundConfig(),
                this._createButton2BackgroundConfig(),
                this._createButton3BackgroundConfig(),
                this._createButton4BackgroundConfig(),
                this._createScrollBackgroundConfig(),
                this._createScrollThumbConfig(),
                this._createPopupBackgroundConfig(),
                this._createMaskBackgroundConfig(),
            ],
        };
    }

    render() {
        var self = this;
        return {
            type: GridLayout.xtype,
            items: [
                [
                    {
                        el: {
                            type: VerticalLayout.xtype,
                            cls: 'face-config bi-border-right',
                            items: [this._createBaseConfig(), this._createCommonConfig()],
                        },
                    },
                    {
                        el: {
                            type: Layout.xtype,
                        },
                    },
                ],
            ],
        };
    }

    _setStyle(objects) {
        var result = '';
        each(objects, function (cls, object) {
            result += cls + '{';
            each(object, function (name, value) {
                result += name + ':' + value + ';';
            });
            result += '} ';
        });
        StyleLoaders.removeStyle('style').loadStyle('style', result);
    }

    _runGlobalStyle() {
        var backgroundColor = this.backgroundColor.getValue();
        var fontColor = this.fontColor.getValue();
        var activeFontColor = this.activeFontColor.getValue();
        var selectFontColor = this.selectFontColor.getValue();
        var grayFontColor = this.grayFontColor.getValue();
        var disabledFontColor = this.disabledFontColor.getValue();
        var cardBackgroundColor = this.cardBackgroundColor.getValue();
        var hoverBackgroundColor = this.hoverBackgroundColor.getValue();
        var activeBackgroundColor = this.activeBackgroundColor.getValue();
        var selectBackgroundColor = this.selectBackgroundColor.getValue();
        var slitColor = this.slitColor.getValue();

        var button1BackgroundColor = this.button1BackgroundColor.getValue();
        var button2BackgroundColor = this.button2BackgroundColor.getValue();
        var button3BackgroundColor = this.button3BackgroundColor.getValue();
        var button4BackgroundColor = this.button4BackgroundColor.getValue();
        var scrollBackgroundColor = this.scrollBackgroundColor.getValue();
        var scrollThumbColor = this.scrollThumbColor.getValue();
        var popupBackgroundColor = this.popupBackgroundColor.getValue();
        var maskBackgroundColor = this.maskBackgroundColor.getValue();

        this._setStyle({
            'body.bi-background, body .bi-background': {
                'background-color': backgroundColor,
                color: fontColor,
            },
            'body .bi-card': {
                'background-color': cardBackgroundColor,
                color: fontColor,
            },
            'body .bi-tips': {
                color: grayFontColor,
            },
            'div::-webkit-scrollbar,.scrollbar-layout-main': {
                'background-color': scrollBackgroundColor + '!important',
            },
            'div::-webkit-scrollbar-thumb,.public-scrollbar-face:after': {
                'background-color': scrollThumbColor + '!important',
            },
            '.base-disabled': {
                color: disabledFontColor + '!important',
            },
            '.base-disabled .b-font:before': {
                color: disabledFontColor + '!important',
            },
            '.list-view-outer': {
                'background-color': popupBackgroundColor + '!important',
            },
            '.bi-z-index-mask': {
                'background-color': maskBackgroundColor + '!important',
            },
            '.bi-list-item:hover,.bi-list-item-hover:hover,.bi-list-item-active:hover,.bi-list-item-select:hover,.bi-list-item-effect:hover':
                {
                    'background-color': hoverBackgroundColor + '!important',
                },
            '.bi-list-item-active:active,.bi-list-item-select:active,.bi-list-item-effect:active': {
                'background-color': activeBackgroundColor + '!important',
                color: activeFontColor + '!important',
            },
            '.bi-list-item-active.active,.bi-list-item-select.active,.bi-list-item-effect.active': {
                'background-color': selectBackgroundColor + '!important',
                color: selectFontColor + '!important',
            },
            'body .bi-button.button-common': {
                'background-color': button1BackgroundColor,
                'border-color': button1BackgroundColor,
            },
            'body .bi-button.button-success': {
                'background-color': button2BackgroundColor,
                'border-color': button2BackgroundColor,
            },
            'body .bi-button.button-warning': {
                'background-color': button3BackgroundColor,
                'border-color': button3BackgroundColor,
            },
            'body .bi-button.button-ignore': {
                'background-color': button4BackgroundColor,
            },
            // 以下是分割线颜色
            'body .bi-border,body .bi-border-top,#wrapper .bi-border-bottom,body .bi-border-left,body .bi-border-right':
                {
                    'border-color': slitColor,
                },
            '.bi-collection-table-cell': {
                'border-right-color': slitColor,
                'border-bottom-color': slitColor,
            },
            '.bi-collection-table-cell.first-col': {
                'border-left-color': slitColor,
            },
            '.bi-collection-table-cell.first-row': {
                'border-top-color': slitColor,
            },
        });
    }

    mounted() {
        this.backgroundColor.setValue('');
        this.fontColor.setValue('');
        this.activeFontColor.setValue('');
        this.selectFontColor.setValue('');
        this.grayFontColor.setValue('');
        this.disabledFontColor.setValue('');
        this.cardBackgroundColor.setValue('');
        this.hoverBackgroundColor.setValue('');
        this.activeBackgroundColor.setValue('');
        this.selectBackgroundColor.setValue('');

        this.button1BackgroundColor.setValue('');
        this.button2BackgroundColor.setValue('');
        this.button3BackgroundColor.setValue('');
        this.button4BackgroundColor.setValue('');
        this.scrollBackgroundColor.setValue('');
        this.scrollThumbColor.setValue('');
        this.popupBackgroundColor.setValue('');
        this.maskBackgroundColor.setValue('');
        this.slitColor.setValue('');
        this._runGlobalStyle();
    }
}