import React, {
    Component
} from 'react';
import {
    WeaTab
} from 'ecCom';
import {
    observer
} from 'mobx-react';
import {
    Button
} from 'antd';
import AdvanceSearchFormInfo from './AdvanceSearchFormInfo';
import {
    cloneDeep
} from 'lodash';
import {
    calFormHeight
} from '../../util/index';
import {
    i18n
} from '../../public/i18n';

@observer
export default class Tabs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showSearchAd: false,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            showSearchAd: false,
        })
    }

    doSearch = () => {
        const {
            conditionForm,
            tabConfig,
            activeTabInfo,
        } = this.props;

        let tabInfo = tabConfig.tabs[activeTabInfo.activeTabIndex];
        tabInfo.doSearch(conditionForm.getFormParams());
        this.setState({
            showSearchAd: false
        });
    }

    doReset = () => {
        const {
            conditionForm
        } = this.props;
        conditionForm.resetConditionValue();
    }

    doCancel = () => {
        const {
            conditionForm
        } = this.props;
        this.setState({
            showSearchAd: false,
        });
    }

    getTabButtonsAd() {
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xygary`} type="primary" onClick={this.doSearch}>{i18n.button.search()}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5l4fsp`} type="ghost" onClick={this.doReset}>{i18n.button.reset()}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yktxms`} type="ghost" onClick={this.doCancel}>{i18n.button.cancel()}</Button>)
        ]
    }

    renderForm = () => {
        const {
            conditionForm,
            conditionFormFields,
            itemRender
        } = this.props;
        const {
            isFormInit
        } = conditionForm;
        if (isFormInit)
            return <AdvanceSearchFormInfo ecId={`${this && this.props && this.props.ecId || ''}_AdvanceSearchFormInfo@5us8i8`} form={conditionForm} formFields={conditionFormFields} itemRender={itemRender}/>
        else
            return '';
    }

    initTab = (props) => {
        return React.cloneElement(<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@3x9y9h`}/>, {
            ...props
        });
    }

    renderTabNav = () => {
        //data
        const {
            activeTabInfo,
            tabConfig,
            tabChangeHandle,
            tabBtnDef,
            conditionForm,
            conditionFormFields,
            advanceHeight,
            store,
            leftStyle,
        } = this.props;

        let tabInfo = tabConfig.tabs[activeTabInfo.activeTabIndex];
        let tabsData = cloneDeep(tabConfig.tabs) || [];
        tabsData != null && tabsData.map(tab => {
            if (typeof(tab.title) == 'function'){
                tab.title = tab.title();
            }
            delete tab.topButtonDef;
            delete tab.tabButtonDef;
        });
        let tabProps = {
            type: 'editable-inline',
            datas: tabsData,
            keyParam: tabConfig.keyParam,
            selectedKey: tabConfig.activeTabKey,
            onChange: tabChangeHandle,
            leftStyle
        }
        tabBtnDef && Object.assign(tabProps, {
            buttons: tabBtnDef
        });
        const searchType = tabInfo.searchType || [];
        if (searchType.length > 0) {
            Object.assign(tabProps, {
                searchType: searchType,
                onSearch: (value) => {
                    if (searchType.indexOf('advanced') >= 0) {
                        tabInfo.doSearch(conditionForm.getFormParams());
                    } else {
                        tabInfo.doSearch({
                            [tabInfo.searchKey]: value
                        });
                    }
                }
            });
            if (searchType.indexOf('advanced') >= 0 && conditionForm != null && conditionForm.isFormInit) {
                const formParams = conditionForm.getFormParams();
                Object.assign(tabProps, {
                    searchsBaseValue: formParams[tabInfo.searchKey] || '',
                    showSearchAd: this.state.showSearchAd,
                    setShowSearchAd: (bool) => {
                        this.setState({
                            showSearchAd: bool
                        })
                    },
                    onSearchChange: (value) => conditionForm.updateFields({
                        [tabInfo.searchKey]: {
                            value
                        }
                    }, false),
                    buttonsAd: this.getTabButtonsAd(),
                    searchsAd: <div
                        onKeyDown={(e) =>{
                            if (e.keyCode == 13 && e.target.tagName === "INPUT") {
                                tabInfo.doSearch(conditionForm.getFormParams());
                                this.setState({
                                    showSearchAd: false
                                })
                            }
                        } }
                    >{this.renderForm()}</div>
                });

                Object.assign(tabProps, {
                    //advanceHeight: calFormHeight(conditionFormFields.length, _.keys(formParams).length)
                    advanceHeight: advanceHeight ? advanceHeight : calFormHeight(conditionFormFields.length, conditionForm.fieldArr)
                });
            }
        }
        tabConfig.onTabEdit && Object.assign(tabProps, {
            onEdit: tabConfig.onTabEdit
        });

        return this.initTab(tabProps);
    }

    renderTabContent = () => {
        const {
            children,
            activeTabInfo,
            rightMenu,
            store
        } = this.props;
        if (Array.isArray(children)) {
            return React.cloneElement(children[activeTabInfo.activeTabIndex], {
                rightMenu,
                activeTabIndex: activeTabInfo.activeTabIndex,
                store
            });
        } else {
            return React.cloneElement(children, {
                rightMenu,
                activeTabIndex: activeTabInfo.activeTabIndex,
                store
            });
        }
    }

    render() {
        const {
            tabConfig
        } = this.props;
        return (
            <div style={{width: '100%', height: '100%'}}>
                {tabConfig.tabs.length > 0 && this.renderTabNav()}
                {tabConfig.tabs.length > 0 && this.renderTabContent()}
            </div>
        );
    }
}