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
} from 'antd';

import Layout from '../../components/Layout/Layout';
import MainHeader from '../../components/MainHeader/MainHeader';
import HeaderOperation, {DetailOperations} from '../../components/HeaderOperation/HeaderOperation';

import {formItemLayout, footerFormSubmitLayout, FILE_UPLOAD, handleUpload} from '../../utils';

@connect(state=>({
    loading: state.customMessage.loading,
    item: state.customMessage.item,
    user: state.user,
}))
@Form.create()
export default class AddItem extends Component {
    constructor(props, content) {
        super(props, content);
        this.state = {
            redirectName: undefined,
            sendName: undefined,
            channelType: 3,
            fileList: [],
        }
    }

    componentWillMount(){
        this.props.dispatch({
            type: 'CLEAR_MESSAGE_ITEM'
        });
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps && nextProps.item && nextProps.item.id) {
            this.props.history.replace('/customMessages/' + nextProps.item.id);
        }
    }

    // componentWillUnmount(){
    //     this.props.dispatch({
    //         type: 'CLEAR_MESSAGE_ITEM'
    //     });
    // }

    handleSubmit(e) {
        e.preventDefault();
        const data = this.props.form.getFieldsValue();
        data.customMessage.redirectType = this.state.redirectName;
        data.customMessage.sendType = this.state.sendName;
        data.customMessage.channelType = this.state.channelType;
        data.customMessage.pic = this.state.fileList[0] ? this.state.fileList[0].url : undefined;
        if (!data.customMessage.contents) {
            message.error('缺少消息正文');
            return;
        }

        console.log(data);
        this.props.dispatch({
            type: 'CREATE_MESSAGE',
            data
        });
    }

    render = ()=> {
        const {loading, form:{getFieldProps}, location:{query}, dispatch, user} = this.props;



        const operation = (
            <HeaderOperation history={this.props.history} buttons={[{key: 'rollback'}]}/>
        );

        const header = (
            <MainHeader breadcrumb={['消息管理', '推送消息']} title="推送消息"
                        operation={operation}
            />
        );

        const redirectNamePlaceholder = {0: '无需填写', 1: '请输入一个产品ID', 2: '请输入消息跳转指定的URL地址'};

        const sendNamePlaceholder = {1: '无需填写', 2: '请输入一个产品ID', 3: '请输入接收消息的人员的手机号码'};

        const {channelType} = this.state;

        return (
            <Layout header={header}>
                <Spin spinning={loading}>
                    <Form className="main-form" horizontal onSubmit={this.handleSubmit.bind(this)}>
                        <Form.Item label="推送渠道" {...formItemLayout}>
                            <Row>
                                <Col span="6">
                                    <Radio.Group onChange={(e)=> {
                                        this.setState({channelType: e.target.value})
                                    }}
                                                 value={this.state.channelType}>
                                        <Radio.Button key="b" value={3} checked={true}>APP</Radio.Button>
                                        <Radio.Button key="a" value={1}>微信</Radio.Button>
                                    </Radio.Group>
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item label="推送对象" {...formItemLayout}>
                            <Row>
                                <Col span="6">
                                    <Select placeholder="请选择"
                                            value={this.state.sendName}
                                            onChange={value=>this.setState({sendName: value})}>
                                        <Select.Option value="1">全局推送</Select.Option>
                                        <Select.Option value="2">产品ID</Select.Option>
                                        <Select.Option value="3">手动导入</Select.Option>
                                    </Select>
                                </Col>
                                <Col span="18" style={{paddingLeft: '.5em'}}>
                                    <Input placeholder={sendNamePlaceholder[this.state.sendName]}
                                           {...getFieldProps('customMessage.send')} />
                                </Col>
                            </Row>
                        </Form.Item>
                        {
                            channelType === 3 &&
                            <div>
                                <Form.Item label="消息跳转" {...formItemLayout}>
                                    <Row>
                                        <Col span="6">
                                            <Select placeholder="请选择"
                                                    value={this.state.redirectName}
                                                    onChange={value=>this.setState({redirectName: value})}>
                                                <Select.Option value="0">无</Select.Option>
                                                <Select.Option value="1">产品ID</Select.Option>
                                                <Select.Option value="2">URL</Select.Option>
                                                <Select.Option value="3">图片URL</Select.Option>
                                            </Select>
                                        </Col>
                                        <Col span="18" style={{paddingLeft: '.5em'}}>
                                            <Input placeholder={redirectNamePlaceholder[this.state.redirectName]}
                                                   {...getFieldProps('customMessage.redirect')} />
                                        </Col>
                                    </Row>
                                </Form.Item>
                                <Form.Item label="弹窗提醒" {...formItemLayout}>
                                    <Radio.Group {...getFieldProps('customMessage.isSend', {initialValue: false})}>
                                        <Radio key="a" value={true}>是</Radio>
                                        <Radio key="b" value={false} checked={true}>否</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item label="列表图片" {...formItemLayout}>
                                    <Upload {...FILE_UPLOAD} listType="picture-card"
                                            multiple={false}
                                            headers={{
                                                authorization: user && user.token,
                                            }}
                                            onChange={info=>this.setState({fileList: handleUpload(info, 1)})}
                                            onPreview={file => {
                                                this.setState({
                                                    priviewImage: file.url,
                                                    priviewVisible: true
                                                });
                                            }}
                                            fileList={this.state.fileList}>
                                        <Icon type="upload"/>
                                        <div className="ant-upload-text">上传列表图片</div>
                                    </Upload>
                                    <Modal footer={null}
                                           width="100vw"
                                           visible={this.state.priviewVisible}
                                           className="img-priview-dialog"
                                           style={{height:'100vh', background:'transparent'}}
                                           onCancel={()=>this.setState({ priviewVisible: false })}>
                                        <img src={this.state.priviewImage} style={{maxWidth:'100%'}}/>
                                    </Modal>
                                </Form.Item>
                                <Form.Item label="消息标题" {...formItemLayout}>
                                    <Input placeholder="消息标题" {...getFieldProps('customMessage.title')}  />
                                </Form.Item>
                                <Form.Item label="消息摘要" {...formItemLayout}>
                                    <Input placeholder="消息摘要" type="textarea"
                                           autosize={{
                                               minRows: 3,
                                               maxRows: 10
                                           }} {...getFieldProps('customMessage.abstracts')}  />
                                </Form.Item>
                            </div>
                        }

                        <Form.Item label="消息正文" help={
                            <div
                                dangerouslySetInnerHTML={{__html: channelType === 1 ? '微信跳转链接模板:  &lt;a href="此处替换跳转链接"&gt;此处替换显示内容&lt;/a&gt;' : '最多50个字符'}}/>
                        } {...formItemLayout}>
                            <Input placeholder="消息正文" type="textarea" maxLength={ channelType === 1 ? 10000 : 50}
                                   autosize={{minRows: 3, maxRows: 10}} {...getFieldProps('customMessage.contents')}  />
                        </Form.Item>

                        <Form.Item {...footerFormSubmitLayout} style={{marginTop: 30}}>
                            <Button type="primary" htmlType="submit" loading={loading}><Icon type="save"/>立即推送</Button>
                            <Button onClick={e=> {
                                e.preventDefault();
                                this.props.history.goBack();
                            }}
                                    style={{marginLeft: '1em'}}>
                                <Icon type="rollback"/>返回
                            </Button>
                        </Form.Item>
                    </Form>
                </Spin>
            </Layout>
        );
    }
}
