import React from "react";
import { Layout, Steps, Row, Col, Icon, Button, Form, Input, message } from 'antd';

const { Step } = Steps;
const InputGroup = Input.Group;

const steps = [
  {
    class: 'animate about',
    title: 'Немного о себе',
    text_first: 'Немного о себе',
    text_second: 'Поделитесь личной информацией о вас.',
    description: "Имя, фамилия",
    fields: [
        {
          name: 'username',
          label: 'Имя',
          placeholder: 'Введите имя',
          type: 'text',
          message: 'Пожалуйста введите свое имя!',
          required: 1,
          icon: 'user'
        },
        {
          name: 'lastname',
          label: 'Фамилия',
          placeholder: 'Введите фамилию',
          type: 'text',
          message: 'Пожалуйста введите свою фамилию!',
          required: 1,
          icon: 'user'
        },

    ],
  },
  {
    class: 'animate email',
    title: 'Почтовый адресс',
    text_first: 'Почтовый адресс',
    text_second: 'Введите адрес для связи.',
    description: "Email, пароль",
    fields: [
        {
          name: 'email',
          label: 'Email',
          placeholder: 'Введите email',
          type: 'mail',
          message: 'Пожалуйста введите свой email!',
          required: 1,
          icon: 'mail'
        },
        {
          name: 'password',
          label: 'Пароль',
          placeholder: 'Введите пароль',
          type: 'password',
          message: 'Пожалуйста введите пароль!',
          required: 1,
          icon: 'lock'
        },

    ],
  },
];

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class Register extends React.Component {
  componentDidMount() {
    // To disable submit button at the beginning.
    this.props.form.validateFields();
  }

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

  constructor(props) {
    super(props);
    this.state = {
      current: 0,
    };
  }

  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }

  render(){
      const { current } = this.state;
      const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

      return (
        <Layout className="register">
        <Row>
          <Col span={4} className={steps[current].class}>
            <div className="wrapper">
              <img src="./logo.svg" />
            </div>
            <div className="left-side">
              <Steps current={current} direction="vertical">
                {steps.map(item => (
                  <Step key={item.title} title={item.title} description={item.description} />
                ))}
              </Steps>
            </div>
            <div className="bg">
              <img src="./side-bg.png" />
            </div>
          </Col>
          <Col span={20}>
            <Form onSubmit={this.handleSubmit} className="login-form">
              <div className="right-side">
                <Col span={8}>
                  <div className="steps-content">
                    <h1 span={24} className="description">{steps[current].text_first}</h1>
                    <p>{steps[current].text_second}</p>
                    <InputGroup size="large">
                    {steps[current].fields.map((field, index) => (
                      <Form.Item validateStatus={(isFieldTouched(field.name) && getFieldError(field.name)) ? 'error' : ''} help={(isFieldTouched(field.name) && getFieldError(field.name)) || ''} key={index}>
                         {getFieldDecorator(field.name, {
                           rules: [{ required: field.required, message: field.message }],
                         })(
                           <Input
                            type={field.type}
                             prefix={<Icon type={field.icon} style={{ color: 'rgba(0,0,0,.25)' }} />}
                             placeholder={field.placeholder}
                           />,
                         )}
                       </Form.Item>
                    ))}
                    </InputGroup>
                    <div className="steps-action">
                      {current < steps.length - 1 && (
                        <Button type="primary" size="large" onClick={() => this.next()} disabled={hasErrors(getFieldsError())}><Icon type="arrow-right" /></Button>
                      )}
                      {current > 0 && (
                        <Button size="large" style={{ marginRight: 10 }} onClick={() => this.prev()}>
                          <Icon type="arrow-left" /> Вернуться
                        </Button>
                      )}
                      {current === steps.length - 1 && (
                          <Button type="primary" htmlType="submit" size="large" disabled={hasErrors(getFieldsError())}>
                            Регистрация
                          </Button>
                      )}
                    </div>
                  </div>
                </Col>
              </div>
            </Form>
          </Col>
        </Row>
        </Layout>
      );
  }
}

export default Register = Form.create({ name: 'register' })(Register);