// FORM TAST
// ######### Imports ####################
import React, { useState } from 'react';
import styled from 'styled-components';
import { find, get, filter, map } from 'lodash';
import Api from '../../core/api';


// ######### Components ####################

const Input = (props) => {
  const [state, setState] = useState({
    showContent: false,
  });

  let { type, ...rest } = props;

  if (type === 'password' && state.showContent) {
    type = 'text';
  }

  return (
    <div>
      <input {...rest} type={type} />
      {props.type === 'password' && <input type="checkbox" onChange={() => setState({ showContent: !state.showContent })} />}
    </div>
  );
};
// ######### Composing view ####################

const superDatabase = [

];

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      password: '',
      username: '',
    };

    this.onSubmit = this.onSubmit.bind(this);
    this.onChangePassword = this.onChangePassword.bind(this);
    this.onChangeUsername = this.onChangeUsername.bind(this);
  }

  onChangePassword(e) {
    this.setState({
      password: e.target.value,
    });
  }

  onChangeUsername(e) {
    this.setState({
      username: e.target.value,
    });
  }

  onSubmit(e) {
    e.preventDefault();

    let correctPassword = false;
    const regW = new RegExp(/\w/);
    const regD = new RegExp(/\d/);

    if (this.state.password.length >= 8 && regW.test(this.state.password) && regD.test(this.state.password)) {
      correctPassword = true;
    } else {
      alert('wrong password. cancelled');
    }

    if (correctPassword) {
      const exist = find(superDatabase, { username: this.state.username });

      if (!exist) {
        superDatabase.push(this.state);
        this.setState({
          password: '',
          username: '',
        });
        alert('added.');
      } else {
        alert('exist. cancelled');
      }

      console.log('superDatabase', superDatabase);
    }
  }

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <Input value={this.state.username} name="username" type="text" onChange={this.onChangeUsername} />
        <Input value={this.state.password} name="password" type="password" onChange={this.onChangePassword} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

// ######### Export ####################
export default App;