import { IPropEntity, IIdentity, IComponentPropEntity, IPropGroupEntity } from '../../../../models/base';

/** 样式状态值集合 */
export const ClassStateValueList: IIdentity[] = [
    { key: 'default', name: '默认' },
    { key: 'hover', name: '经过' },
    { key: 'active', name: '激活' },
    { key: 'focus', name: '聚焦' }
];

/** 样式编辑项的属性Keys */
export const StylePropKeys = {
    /** 样式名 */
    className: 'className',

    /** 样式状态 */
    classState: 'classState',

    /** 自定义样式 */
    customStyle: 'customStyle'
};

export const ClassNamePropEntity: IComponentPropEntity = {
    key: 'className',
    name: 'class',
    group: 'cssSelector',
    combination: ['editingClassName', 'classNames'],
    // throttle: true,
    editorOption: {
        key: 'CssRuleListEditor',
        config: {
            optionFields: { value: 'key', label: 'name' },
            hideSelected: true,
            selectProps: { style: { width: '173px' } },
        },
        hooks: `{
            setData:function(editorOption){
                lue.eventBus.emit('onStyleEditorCallHook', { hookName:'setOptions', editorOption:editorOption });
            },
            updateClassState:function(editorOption,editorOptions){
                
            }
        }`

        // let stateEO=editorOptions.get('classState');
        //         let styleEO=editorOptions.get('customStyle');

        //         let editingClassName=(editorOption.realValue||{}).editingClassName;
        //         let editingClassState=(stateEO.data.editingClassStates||{})[editingClassName];

        //         htmlUIEditor2.eventBus.emit('onStyleEditorSetValues', [
        //             {editorOption:stateEO,value:editingClassState,visible:!!editingClassName,defayltHooks:true},
        //             {editorOption:styleEO,value:editingClassName?undefined:'style',defaultHooks:true}
        //         ]);

        //         htmlUIEditor2.eventBus.emit('onStyleEditorEditStyle');
    }
};

export const ClassStatePropEntity: IComponentPropEntity = {
    key: 'classState',
    name: '样式状态',
    // throttle: true,
    group: 'cssSelector',
    editorOption: {
        key: 'RadioEditor',
        config: {
            options: ClassStateValueList,
            optionFields: { value: 'key', label: 'name' }
        },
        hooks: `{
            onChange:function(editorOption,editorOptions){
                lue.eventBus.emit('onStyleEditorEditStyle');
            }
        }`
    },
    defaultValue: 'default',
};

export const CustomStylePropEntity: IComponentPropEntity = {
    key: 'customStyle',
    name: '自定样式',
    // throttle: true,
    group: 'cssSelector',
    editorOption: {
        key: 'SelectEditor',
        config: {
            optionFields: { value: 'key', label: 'name' },
            selectProps: { style: { width: '173px' } },
        },
        hooks: `{
            
        }`
        // onInitEditStyle:function(editorOption,editorOptions){
        //     window.eventBus.emit('onStyleEditorCallHook', { hookName:'setOptions', editorValue:{ editorOption } });
        // },
        // getOptions:function(editorOption,editorOptions){
        //     window.eventBus.emit('onStyleEditorCallHook', { hookName:'setOptions', editorValue:{ editorOption } });
        // },
        // onChange:function(editorOption,editorOptions){
        //     let classEO=editorOptions.get('className'),
        //         stateEO=editorOptions.get('classState'),
        //         updates=[];
        //     classEO.realValue&&classEO.realValue.editingClassName&&updates.push({editorOption:classEO,value:{...classEO.realValue,editingClassName:undefined},defaultHooks:true});
        //     stateEO.realValue&&updates.push({editorOption:stateEO,value:undefined,visible:false,defaultHooks:true});
        //     window.eventBus.emit('onStyleEditorSetValues', updates);

        //     window.eventBus.emit('onStyleEditorEditStyle');
        // }
    },
    // defaultValue: 'style'
};

export const PropertyPropEntities: IPropEntity[] = [
    {
        key: 'width',
        group: 'interface',
        name: '尺寸',
        editorOption: {
            key: 'DimensionInputEditor',
            subtitle: '宽度',
            config: {
                inputNumberProps: {
                    style: {
                        width: '60px'
                    }
                }
            }
        }
    },
    {
        key: 'maxWidth',
        group: 'interface',
        editorOption: {
            key: 'DimensionInputEditor',
            subtitle: '最大',
            config: {
                inputNumberProps: {
                    style: {
                        width: '60px'
                    }
                }
            }
        }
    },
    {
        key: 'minWidth',
        group: 'interface',
        editorOption: {
            key: 'DimensionInputEditor',
            subtitle: '最小',
            config: {
                inputNumberProps: {
                    style: {
                        width: '60px'
                    }
                }
            }
        },
    },
    {
        key: 'height',
        group: 'interface',
        name: ' ',
        editorOption: {
            key: 'DimensionInputEditor',
            subtitle: '高度',
            config: {
                inputNumberProps: {
                    style: {
                        width: '60px'
                    }
                }
            }
        }
    },
    {
        key: 'maxHeight',
        group: 'interface',
        editorOption: {
            key: 'DimensionInputEditor',
            subtitle: '最大',
            config: {
                inputNumberProps: {
                    style: {
                        width: '60px'
                    }
                }
            }
        }
    },
    {
        key: 'minHeight',
        group: 'interface',
        editorOption: {
            key: 'DimensionInputEditor',
            config: {
                inputNumberProps: {
                    style: {
                        width: '60px'
                    }
                }
            },
            subtitle: '最小'
        }
    },
    {
        key: 'overflow',
        name: '溢出',
        group: 'interface',
        editorOption: {
            key: 'InputEditor',

        }
    },
    {
        key: 'display',
        name: '布局',
        group: 'layout',
        editorOption: {
            key: 'InputEditor',
        }
    },
    {
        key: 'justifyContent',
        name: '水平对齐',
        group: 'layout',
        editorOption: {
            key: 'InputEditor',

        }
    },
    {
        key: 'alignItems',
        name: '垂直对齐',
        group: 'layout',
        editorOption: {
            key: 'InputEditor',
        }
    },
    //margin
    {
        key: 'margin',
        name: '外边距',
    },
    {
        key: 'marginLeft',
        name: '左外边距'
    },
    {
        key: 'marginRight',
        name: '右外边距'
    },
    {
        key: 'marginTop',
        name: '上外边距'
    },
    {
        key: 'marginBottom',
        name: '下外边距'
    },
    //padding
    {
        key: 'padding',
        name: '内边距'
    },
    {
        key: 'paddingLeft',
        name: '左内边距'
    },
    {
        key: 'paddingRight',
        name: '右内边距'
    },
    {
        key: 'paddingTop',
        name: '上内边距'
    },
    {
        key: 'paddingBottom',
        name: '下内边距'
    },
    //position
    {
        key: 'position',
        name: '定位'
    },
    {
        key: 'left',
        name: '左'
    },
    {
        key: 'right',
        name: '右'
    },
    {
        key: 'top',
        name: '上'
    },
    {
        key: 'bottom',
        name: '下'
    },
    {
        key: 'zIndex',
        name: '层级'
    },
    //float
    {
        key: 'float',
        name: '浮动'
    },
    {
        key: 'clear',
        name: '清除浮动'
    },
    //other
    {
        key: 'opacity',
        name: '透明度'
    }
];

/** 所有的 样式实体 */
export const StylePropEntities = [ClassNamePropEntity, ClassStatePropEntity, CustomStylePropEntity, ...PropertyPropEntities];

/** 样式编辑项分类 */
export const StylePropGroups: IPropGroupEntity[] = [{
    key: 'cssSelector',
    name: '样式选择器',
    lock: true
}, {
    key: 'layout',
    name: '布局'
}, {
    key: 'interface',
    name: '界面'
}];