import {
    Form,
    Input,
    Tooltip,
    Icon,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    AutoComplete,
} from 'antd';
import 'antd/dist/antd.css';
import * as React from "react";
import NavBar from "./NavBar";
import fire from '../config/Fire';
import connect from "react-redux/es/connect/connect";
import {setNameAction} from "../redux_stuff/actionTypes";
import {withRouter} from "react-router";

const {Option} = Select;
const AutoCompleteOption = AutoComplete.Option;

const mapStateToProps = state => {
    return { name: state.name }
};

const plainOptions = ['Ethiopian', 'Chinese', 'Indian', 'American'];

class Profile extends React.Component {
    state = {
        confirmDirty: false,
        autoCompleteResult: [],
    };

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    };

    handleConfirmBlur = e => {
        const {value} = e.target;
        this.setState({confirmDirty: this.state.confirmDirty || !!value});
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        const {autoCompleteResult} = this.state;
        console.log("[Profile.js] .user: " + fire.auth().currentUser);

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };

        const validate = () => {
            const {validateFieldsAndScroll} = this.props.form;
            validateFieldsAndScroll((err, values) => {
                console.log(values);
            });
        };

        return (
            <div>
                <NavBar/>
                <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                    <Form.Item
                        label={
                            <span>
              First Name&nbsp;
            </span>
                        }
                    >
                        {getFieldDecorator('firstName', {
                            rules: [{required: true, message: 'Please input your first name!', whitespace: true}],
                        })(<Input/>)}
                    </Form.Item>
                    <Form.Item
                        label={
                            <span>
             Last Name&nbsp;
            </span>
                        }
                    >
                        {getFieldDecorator('lasttName', {
                            rules: [{required: true, message: 'Please input your last name!', whitespace: true}],
                        })(<Input/>)}
                    </Form.Item>
                    <Form.Item
                        label={
                            <span>
              Nickname&nbsp;
                                <Tooltip title="What do you want others to call you?">
                <Icon type="question-circle-o"/>
              </Tooltip>
            </span>
                        }
                    >
                        {getFieldDecorator('nickname', {
                            rules: [{required: false, message: 'Please input your nickname!', whitespace: true}],
                        })(<Input/>)}
                    </Form.Item>
                    <Form.Item label="Habitual Residence">
                        {getFieldDecorator('residence', {
                            rules: [
                                {required: true, message: 'Please select your habitual residence!'},
                            ],
                        })(<Input/>)}
                    </Form.Item>
                    <Form.Item {...tailFormItemLayout}>
                        {getFieldDecorator('types', {
                            valuePropName: 'checked',
                        })(
                            <Checkbox.Group options={plainOptions} defaultValue={['']}/>
                            ,
                        )}
                    </Form.Item>
                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit" onClick={this.validate}>
                            Save
                        </Button>
                    </Form.Item>
                </Form>
                {this.props.name}
            </div>
        );
    }
}

//export default Form.create({name: 'register'})(Profile);
export default Form.create({name: 'register'})(connect(mapStateToProps, {setNameAction}))(Profile);