import React from 'react'
import { Field, reduxForm } from 'redux-form'

import { StepOne, StepTwo, StepThree, StepFour } from '../steps'


export const steps =
    [
      {name: 'Data', component: <StepOne/>},
      {name: 'Project', component: <StepTwo/>},
      {name: 'Scope', component: <StepThree/>},
      {name: 'Success', component: <StepFour/>}
    ]

export class MultiStep extends React.Component {



          constructor(props) {
            super(props);
            this.state = {
              showNextBtn: 'showNextBtn' + ' hero_button',
              compState: 0,
              navState: this.getNavStates(0, this.props.steps.length)
            };

            this.handleOnClick = this.handleOnClick.bind(this);
            this.handleKeyDown = this.handleKeyDown.bind(this);
            this.next = this.next.bind(this);
          }

          getNavStates(indx, length) {
            let styles = [];
            for (let i=0; i<length; i++) {
              if(i < indx) {
                styles.push('done')
              }
              else if(i === indx) {
                styles.push('doing')
              }
              else {
                styles.push('todo')
              }
            }
            return { current: indx, styles: styles }
          }
          checkNavState(currentStep){

            if(currentStep > 0 && currentStep < this.props.steps.length - 1){
              this.setState({
              })
            }
            else if(currentStep === 0) {
              this.setState({
                showNextBtn: true
              })
            }
            else if (this.state.compState = 3) {
                this.setState(
                    {showNextBtn : 'showNextBtn ' + ' hide'}
              )
            }

          }
          setNavState(next) {



              this.setState({navState: this.getNavStates(next, this.props.steps.length)})
              if (next < this.props.steps.length) {
                this.setState({compState: next})
              }

              this.checkNavState(next);
            }



          handleKeyDown(evt) {
            if (evt.which === 13) {
              <Component onSubmit={this.next}/>
            }
          }
          handleOnClick(evt) {
            if (evt.currentTarget.value === (this.props.steps.length - 1) &&
              this.state.compState === (this.props.steps.length - 1)) {
              this.setNavState(this.props.steps.length)
            }
            else {
              this.setNavState(evt.currentTarget.value)
            }
          }
          next() {
            this.setNavState(this.state.compState + 1)
          }


          getClassName(className, i){
            return className + "-" + this.state.navState.styles[i];
          }
          renderSteps() {

              return this.props.steps.map((s, i)=> (

                <li className={this.getClassName("progtrckr", i)} onClick={this.handleOnClick} key={i} value={i}>
                  <em>{i+1}</em>
                  <span>{this.props.steps[i].name}</span>
                </li>
              ));
            }
          render() {

              const Component = this.props.steps[this.state.compState].component.type;

            return (
              <div className="container" onKeyDown={this.handleKeyDown}>

                <ol className="progtrckr">
                  {this.renderSteps()}
                </ol>
                <Component onSubmit={this.next}/>
              </div>
            );
          }
        }


export var submit =(values) =>{

          let isError =false;

          if (isError) {
              throw new SumissionError(error);
          } else{
            return submitToServer(values)
              .then(data =>{
                  if (data.errors)  {
                    console.log(data.errors);
                      throw new SubmissionError(data.errors);
                  } else{
                      console.log(values)
                      console.log('server added data to database');
                  }
              });
          }
          }



export async function submitToServer(data){

  try{
      let response = await fetch('http://localhost:5000/stepone', {
          method: 'POST',
          headers: {
            'Content-type' :  'application/json',
          },
          body: JSON.stringify(data),
        });
        let responseJson = await response.json();
        return responseJson;
  }   catch (error) {
          console.error(error);
  }
}
const validate = values => {

    const errors = {}

    if (!values.username ) {
    errors.username =<div className ="error"> 'Required'</div>
  } else if (values.username.length > 7) {
    errors.username = <div className ="error">'Should be 7 characters or less'</div>
  }

    if (!values.email) {
      errors.email = <div className= "error">You should write your mail</div>
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
      errors.email = <div className ="error">Lets write in perfect scheme</div>
    }
    return errors
  }

  const warn = values => {
    const warnings = {}
    return warnings
  }



  const renderFieldOne = ({ input, label, meta: { touched, error, warning }, custom, ...inputProps }) => (
    <div>
      <div className ="group">
        <input className="text" {...input} {...inputProps} />
        <label>{label}</label>
        <span className="highlight"></span>
        <span className="bar"></span>
        {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
      </div>
    </div>
  )

let StepOneFormValidation = (props) => {
  const { handleSubmit, submitting, } = props


  return (


        <form onSubmit={()=>{handleSubmit(); handleSubmit(submit) }}>

      <Field name="name"
        type="text"
        component={renderFieldOne}
        label="Username"
          />

      <Field name="email"
       type="email"
        component={renderFieldOne}
        label="Email"
         />

      <div>
        <button
        className ="hero_button"
         type="submit"
          disabled={submitting}>
          Submit</button>
      </div>

    </form>
  )
}


export default reduxForm({
  form: 'syncValidation',           // a unique identifier for this form
  validate,                                  // <--- validation function given to redux-form
  warn                                        // <--- warning function given to redux-form
})(StepOneFormValidation)