import React from 'react';
import Button from '../../../Framework/Button';
import Dialog from 'material-ui/Dialog';
import Colors from '../../../Framework/Colors';
import TextField from 'material-ui/TextField';
import Checkbox from 'material-ui/Checkbox';
import MenuItem from 'material-ui/MenuItem';
import SelectField from 'material-ui/SelectField';
import { lodash as _ } from 'meteor/erasaur:meteor-lodash';
import { Accounts } from 'meteor/accounts-base';
import TandCDialog from './TandCDialog';

import Alert from 'react-s-alert';

const countries = [
  { country: '' },
  { country: 'Belgium' },
  { country: 'Netherlands' },
  { country: 'Other' }
];

const styles = {
  buttons: {
    wrapper: {
      display: 'flex',
      justifyContent: 'flex-end',
      marginTop: '30px'
    },
    nonLastButton: {
      marginRight: '15px'
    }
  }
};

class SignUpDialog extends React.Component {

  constructor() {
    super();
    this.register = this.register.bind(this);
    this.setEmail = this.setEmail.bind(this);
    this.setUsername = this.setUsername.bind(this);
    this.setPassword = this.setPassword.bind(this);
    this.setCountryIndex = this.setCountryIndex.bind(this);
    this.setTac = this.setTac.bind(this);
    this.openTaCDialog = this.openTaCDialog.bind(this);
    this.state = {
      email: '',
      username: '',
      password: '',
      country: '',
      countryIndex: 0,
      Tac: false,
      emailError: '',
      usernameError: '',
      passwordError: '',
      countryError: '',
      tacLabel: '',
      validationError: false,
      showTaCDialog: false
    };
  }

  setEmail(event) {
    this.setState({ email: event.target.value });
  }
  setUsername(event) {
    this.setState({ username: event.target.value });
  }

  setPassword(event) {
    this.setState({ password: event.target.value });
  }

  setTac(event, checked) {
    this.setState({ Tac: checked });
  }

  setCountryIndex(event, index, value) {
    this.setState({ countryIndex: value });
  }

  closeTandCDialog() {
    this.setState({ showTaCDialog: false });
  }

  openTaCDialog() {
    this.setState({ showTaCDialog: true });
  }

  renderCountryOptions() {
    return (
      <div>
        <SelectField
          value={this.state.countryIndex}
          onChange={this.setCountryIndex}
          fullWidth
          floatingLabelText="Select your country"
          errorText={this.state.countryError}
          maxHeight={200}
        >
          {this.renderCountries()}
        </SelectField>
      </div>
    );
  }

  renderCountries() {
    return (
      _.map(countries, (country, key) => {
        return (
          <MenuItem key={key} value={key} primaryText={country.country} />
        );
      })
    );
  }

  validateMail() {
    if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(this.state.email)) {
      return 'Not a valid email address';
    }

    return '';
  }

  validateUsername() {
    if (this.state.username.length === 0) {
      return 'Please enter a username';
    }

    return '';
  }

  validatePassword() {
    if (this.state.password.length < 6) {
      return 'Password must be at least 6 character';
    }

    return '';
  }

  validateCountry() {
    if (this.state.countryIndex === 0) {
      return 'Please select a Country';
    }
    if (
      countries[this.state.countryIndex].country !== 'Belgium'
      && countries[this.state.countryIndex].country !== 'Netherlands'
    ) {
      return 'Only players with Belgian or Dutch nationality are allowed.';
    }

    return '';
  }

  validateTac() {
    if (!this.state.Tac) {
      return 'Required';
    }

    return '';
  }

  checkAllFields() {
    if (
      this.validateMail()
      || this.validateUsername()
      || this.validatePassword()
      || this.validateCountry()
      || this.validateTac()
    ) {
      return true;
    }

    return false;
  }

  register() {
    this.setState(
      {
        emailError: this.validateMail(),
        usernameError: this.validateUsername(),
        passwordError: this.validatePassword(),
        countryError: this.validateCountry(),
        tacLabel: this.validateTac(),
        validationError: this.checkAllFields()
      },
      () => {
        const email = this.state.email;
        const username = this.state.username;
        const password = this.state.password;
        const profile = {};

        if (!this.state.validationError) {
          Accounts.createUser(
            { username, email, password, profile }, (Error) => {
              if (Error) {
                Alert.error(
                  'Creating an account failed with the following message: '
                  + `${Error.reason}`);
              } else {
                Alert.success(
                  'Your account has been successfully created. Good luck and have fun on BeSports!'
                );
              }
            }
          );
        }
      }
    );
  }

  render() {
    console.log(this.state.showTaCDialog);
    return (
      <Dialog
        title="Register account"
        open={this.state.showTaCDialog ? false : this.props.showSignUp}
        onRequestClose={this.props.closeDialog}
      >
        <form onSubmit={this.register}>
          <TextField
            value={this.state.email}
            hintText="Email"
            fullWidth
            type="email"
            errorText={this.state.emailError}
            onChange={this.setEmail}
          />
          <TextField
            value={this.state.username}
            hintText="Username"
            fullWidth
            onChange={this.setUsername}
            errorText={this.state.usernameError}
          />
          <TextField
            value={this.state.password}
            hintText="Password"
            fullWidth
            onChange={this.setPassword}
            type="password"
            errorText={this.state.passwordError}
          />
          {this.renderCountryOptions()}
          <Checkbox
            label="Agree to the Terms and Conditions"
            onCheck={this.setTac}
          />
          <div onClick={this.openTaCDialog}>
            click
          </div>
          <div>
            {this.state.tacLabel}
          </div>
          <div style={styles.buttons.wrapper}>
            <Button
              text="Cancel"
              color={Colors.grey700}
              clickFunction={this.props.closeDialog}
              style={styles.buttons.nonLastButton}
            />
            <Button
              text="Register"
              color={this.context.color}
              clickFunction={this.register}
            />
          </div>
        </form>
        <TandCDialog close={this.closeTandCDialog} open={this.state.showTaCDialog} />
      </Dialog>
    );
  }
}

SignUpDialog.propTypes = {
  showSignUp: React.PropTypes.bool,
  closeDialog: React.PropTypes.func
};

SignUpDialog.contextTypes = {
  color: React.PropTypes.string
};

export default SignUpDialog;