import React, { Component, Fragment } from 'react';
import { withRouter, Link } from 'react-router-dom';
import uuid from 'uuid/v4';
import axios from 'axios';

import {
  Spin,
  Row,
  Col,
  Form,
  Input,
  Tooltip,
  Icon,
  Cascader,
  Select,
  Checkbox,
  Button,
  AutoComplete,
} from 'antd';
import './style.css';

const FormItem = Form.Item;

class AccountForm extends Component {
  state = {
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
    confirmDirty: false,
    user: {},
    updated: false,
    update: '',
    picture: null,
  };
  componentDidMount() {
    axios.get('/auth/user').then(response => {
			console.log(response.data)
			if (!!response.data.user) {
				console.log('THERE IS A current logged in USER', response.data.user)
        this.setState({
          email: response.data.user.email,
          username: response.data.user.username,
          walletAddress: response.data.user.walletAddress,
          token: response.data.user.token,
          referralCode: response.data.user.referralCode,
          referralCodeCount: response.data.user.referralCodeCount,
          referralCodeHistory: response.data.user.referralCodeHistory,
        });
			} else {
        console.log("not logged in")
			}
		})
  }
  handleSubmit = e => {
    e.preventDefault();
    // this.setState({ isRegistering: true });

    this.props.form.validateFields((err, values) => {
      if (!err) {

        // TODO
        // implement update account on backend
        //
        // firebase
        //   .database()
        //   .ref(`users/${this.state.uid}`)
        //   .update({
        //     email: values.email,
        //     username: values.username,
        //     role: values.role,
        //     studentId: values.studentId,
        //     picture: this.state.picture,
        //   })
        //   .then(() => {
        //     this.setState({
        //       updated: true,
        //       update: 'Account Successfully Updated!',
        //       isRegistering: false,
        //     });
        //     setTimeout(() => {
        //       this.setState({ updated: false, update: '' });
        //     }, 8000);
        //   })
        //   .catch(error => {
        //     this.setState({ error });
        //   });
      }
    });
  };

  hasErrors(fieldsError) {
    if (this.state.isRegistering) {
      fieldsError = Object.assign(fieldsError, {
        isRegistering: ['Updating your account'],
      });
      // console.log("fieldsError", fieldsError)
    }
    return Object.keys(fieldsError).some(field => fieldsError[field]);
  }

  onSendVerificationEmail = (email) => {

  }

  render() {
    const {
      getFieldDecorator,
      getFieldsError,
      resetFields,
      setFields,
    } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 10 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <p style={{ fontSize: '34px', textAlign: 'center' }}>{this.state.username}'s Profile</p>
        <FormItem
          {...formItemLayout}
          label="username"
        >
          {getFieldDecorator('username', {
            initialValue: this.state.username,
            rules: [
              {
                required: true,
                message: 'Please input your username!',
                whitespace: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem {...formItemLayout} label="E-mail">
          {getFieldDecorator('email', {
            initialValue: this.state.email,
            rules: [
              {
                type: 'email',
                message: 'The input is not valid E-mail!',
              },
              { required: true, message: 'Please input your email!' },
            ],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Email"
            />
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="Wallet Address"
        >
          {getFieldDecorator('walletAddress', {
            initialValue: this.state.walletAddress,
            rules: [
              {
                required: false,
                message: 'Please input your Wallet Address!',
                whitespace: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="Token"
        >
          <div><strong>{this.state.token}</strong></div>
        </FormItem>
        {this.state.referralCode &&
          <FormItem
            {...formItemLayout}
            label="Referral Code"
          >
            <div><strong>{this.state.referralCode}</strong></div>
          </FormItem>
        }
        {!this.state.referralCode &&
          <FormItem style={{ display: 'flex', margin: 'auto', width: '80%' }}>
            <div>To get a referral code, <strong>verify your email.</strong> For every friend you refer you’ll each get 10 tokens.</div>
            <a onClick={() => this.onSendVerificationEmail(this.state.email)}>Resend the verification</a>
          </FormItem>
        }

        <FormItem style={{ display: 'flex', justifyContent: 'center' }}>
          <div>Users who used your referral code</div>
          <div>
            {this.state.referralCodeHistory && this.state.referralCodeHistory.map((user, index) => {
              return (<div key={index} style={{ marginLeft: '120px' }}><strong>{index + 1}. {user.username}</strong></div>);
            })}
          </div>
        </FormItem>
        <FormItem style={{ display: 'flex', justifyContent: 'center' }}>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            style={{ minWidth: '200px' }}
            disabled={
              // true ||
              this.hasErrors(getFieldsError()) ||
              this.state.isRegistering ||
              this.state.isUploading
            }
          >
            Update
          </Button>
          {this.state.isRegistering && <Spin />}
        </FormItem>
        {this.state.error && <p>{this.state.error.message}</p>}
      </Form>
    );
  }
}
AccountForm = withRouter(Form.create()(AccountForm));

class PasswordForm extends Component {
  state = {
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
    confirmDirty: false,
    user: {},
    updated: false,
    update: '',
  };
  componentDidMount() {
    firebase.auth().onAuthStateChanged(authUser => {
      // console.log('componentDidMount() authUser', authUser);
      firebase
        .database()
        .ref(`users/${authUser.uid}`)
        .on('value', snapshot => {
          // console.log('snapshot.val()', snapshot.val());
          this.setState({ uid: authUser.uid, user: snapshot.val() });
        });
    });
  }
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        // console.log('Received values of form: ', values);
        if (this.state.user.password != values.password) {
          firebase
            .auth()
            .currentUser.updatePassword(values.password)
            .then(() => {
              firebase
                .database()
                .ref(`users/${this.state.uid}`)
                .update({
                  password: values.password,
                })
                .then(() => {
                  this.setState({ updated: true });
                  setTimeout(() => {
                    this.setState({ updated: false });
                  }, 8000);
                })
                .catch(error => {
                  this.setState({ error });
                });
              this.setState({
                updated: true,
                update: 'Password Successfully Updated!',
              });
              setTimeout(() => {
                this.setState({ updated: false, update: '' });
              }, 8000);

              // Create a user in your own accessible Firebase Database too
            })
            .catch(error => {
              this.setState({ error });
            });
        }
      }
    });
  };
  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  };
  validatePassword = (rule, value, callback) => {
    const form = this.props.form;
    let errors = [];
    if (value.length < 8) {
      errors.push('Your password must be at least 8 characters.');
    }
    if (value.search(/[a-z]/i) < 0) {
      errors.push('Your password must contain at least one letter.');
    }
    if (value.search(/[0-9]/) < 0) {
      errors.push('Your password must contain at least one digit.');
    }
    if (errors.length > 0) {
      callback(errors.join('\n'));
    }
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirmPassword'], { force: true });
    }
    if (errors.length == 0) {
      callback();
    }
  };
  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirmPassword'], { force: true });
    }
    callback();
  };
  handleConfirmBlur = e => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };
  render() {
    const { getFieldDecorator, resetFields, setFields } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <p style={{ fontSize: '34px', textAlign: 'center' }}>Password Change</p>
        <FormItem {...formItemLayout} label="Password">
          {getFieldDecorator('password', {
            initialValue: this.state.user.password,
            rules: [
              { required: true, message: 'Please input your Password!' },
              {
                validator: this.validatePassword,
              },
            ],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
            />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="Confirm Password">
          {getFieldDecorator('confirmPassword', {
            initialValue: this.state.user.password,
            rules: [
              {
                required: true,
                message: 'Please confirm your password!',
              },
              {
                validator: this.compareToFirstPassword,
              },
            ],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
              onBlur={this.handleConfirmBlur}
            />
          )}
        </FormItem>
        <FormItem style={{ display: 'flex', justifyContent: 'center' }}>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            style={{ minWidth: '200px' }}
          >
            Update
          </Button>
        </FormItem>
        {this.state.error && <p>{this.state.error.message}</p>}
        {this.state.updated && (
          <p style={{ fontSize: '20px', textAlign: 'center' }}>
            {this.state.update}
          </p>
        )}
      </Form>
    );
  }
}
PasswordForm = withRouter(Form.create()(PasswordForm));

class AccountPage extends React.PureComponent {
  // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <Fragment>
        <Row
          type="flex"
          justify="center"
          align="middle"
          style={{
            minHeight: '670px',
          }}
        >
          <Col
            style={{ padding: '10px' }}
            xs={{ span: 24, offset: 0 }}
            lg={{ span: 8, offset: 0 }}
          >
            <AccountForm />
          </Col>
        </Row>
      </Fragment>
    );
  }
}

export default withRouter(AccountPage);