import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {
    Row,
    Col,
    Form,
    Input,
    Button,
    Checkbox,
    Select,
    message,
    Tabs,
    Cascader,
    Radio,
    Upload,
    Icon,
    Modal,
    DatePicker,
    Table,
    Spin,
    Breadcrumb
} from 'antd';

import HuikuanInfoForm from '../../components/ProductForm/HuikuanInfoForm';
import BaseInfoForm from '../../components/ProductForm/BaseInfoForm';
import ShouyiYongjingForm from '../../components/ProductForm/ShouyiYongjingForm';
import ElementForm from '../../components/ProductForm/ElementForm';
import DateTimeStatusForm from '../../components/ProductForm/DateTimeStatusForm';
import DocumentsForm from '../../components/ProductForm/DocumentsForm';
import ContactForm from '../../components/ProductForm/ContactForm';
import MainHeader from '../../components/MainHeader/MainHeader';
import Layout from '../../components/Layout/Layout';

@connect(state=>({
    cates: state.product.cates,
    product: state.product.item,
    loading: state.product.loading,
    user: state.user,
    isEdit: state.product.isEdit
}))
export default class EditItem extends Component {

    static propTypes = {
        form: PropTypes.object,
        dispatch: PropTypes.func,
        caste: PropTypes.array,
        product: PropTypes.object
    };

    constructor(props, content) {
        super(props, content);
        this.state = {
            isEdit: false
        }
    }


    componentDidMount() {
        if (!(this.props.cates && this.props.cates.length)) {
            this.fetchCates();
        }
        this.fetchItem(this.props.params.id);
    };

    componentWillReceiveProps(nextProps) {
        this.setState({isEdit: nextProps.isEdit});
    };

    fetchCates() {
        this.props.dispatch({
            type: 'FETCH_PRODUCT_CATES'
        });
    };

    fetchItem(id) {
        this.props.dispatch({
            type: 'FETCH_PRODUCT_ITEM',
            id
        });
    };


    render = ()=> {

        const {product} = this.props;

        const styles = require('./Product.less');

        const tabs = [
            {tab: '基本信息', children: BaseInfoForm},
            {tab: '收益佣金', children: ShouyiYongjingForm},
            {tab: '汇款账号', children: HuikuanInfoForm},
            {tab: '基本要素', children: ElementForm},
            {tab: '时间状态', children: DateTimeStatusForm},
            {tab: '相关附件', children: DocumentsForm},
            {tab: '服务经理', children: ContactForm}
        ].map((tabPane, index)=> {
            tabPane.key = 'tabs-pane-' + (index + 1);
            return tabPane;
        });

        const {isEdit} = this.state;

        const operation = (
            <div style={{textAlign:'right'}}>
                <Button.Group>
                    {
                        product &&
                        <Button type="ghost"
                                onClick={
                                    e=>{
                                        e.preventDefault();
                                        this.props.dispatch({
                                            type: isEdit ? 'CANCEL_UPDATE_PRODUCT' : 'UPDATE_PRODUCT'
                                        });
                                    }
                        }>
                            <Icon type="edit"/>
                        </Button>
                    }
                    <Button type="ghost" onClick={e=>{
                        e.preventDefault();
                        isEdit ?
                            this.props.dispatch({
                                type: 'CANCEL_UPDATE_PRODUCT'
                            }) :
                            this.props.history.goBack();
                    }}>
                        <Icon type="rollback"/>
                    </Button>
                </Button.Group>
            </div>
        );

        const title = (product && product.itemShortTitle ? product.itemShortTitle + ' - ' : '') + '产品详情' + (isEdit ? ' - 编辑中' : '');

        const header = (<MainHeader breadcrumb={['产品管理', '产品详情']} title={title} operation={operation}/>);

        return (
            <Layout header={header}>
                <Tabs className={styles.tabs} tabPosition="left">
                    { tabs.map(tp=>
                        <Tabs.TabPane tab={tp.tab} key={tp.key}>
                            {product && <tp.children {...this.props} isEdit={isEdit}/> }
                        </Tabs.TabPane>
                    )}
                </Tabs>
            </Layout>
        );
    }
}
