import React, { Component } from 'react';
import { Step, Form, Button, List, Message } from 'semantic-ui-react'

class FormComponent extends Component{
    constructor(props){
      super(props);
      this.state = {
        step: 1
      }
    }

    nextStep = () => {
      this.setState({
        step : this.state.step + 1
      })
    }

    handleChange = (e) => {
      this.setState({
        [e.target.name] : e.target.value
      })
    }

    render(){
      let {step, nom, prenom} = this.state
      return(
        <div>
          <div>
            <Step.Group ordered>
              <Step completed={step > 1} active={step === 1}>
                <Step.Content>
                  <Step.Title>Nom</Step.Title>
                  <Step.Description>Entrer votre nom</Step.Description>
                </Step.Content>
              </Step>

              <Step completed={step > 2} active={step === 2}>
                <Step.Content>
                  <Step.Title>Prénom</Step.Title>
                  <Step.Description>Entrer votre prénom</Step.Description>
                </Step.Content>
              </Step>
              <Step completed={step > 3} active={step === 3}>
                <Step.Content>
                  <Step.Title>Confirmer</Step.Title>
                </Step.Content>
              </Step>
            </Step.Group>
          </div>
          <div className="center">
            <div>
              <Form hidden={step === 1 ? false : true}>
                <Form.Field>
                  <label>Nom</label>
                  <input placeholder='Nom' name='nom' onChange={this.handleChange}/>
                </Form.Field>
              </Form>
            </div>
            <div>
              <Form hidden={step === 2 ? false : true}>
                <Form.Field>
                  <label>Prénom</label>
                  <input placeholder='Prénom' name='prenom' onChange={this.handleChange}/>
                </Form.Field>
              </Form>
            </div>
            <div>
              <List hidden={step === 3 ? false : true}>
               <List.Item>Nom : {nom}</List.Item>
               <List.Item>Prénom : {prenom}</List.Item>
             </List>
           </div>
           <div>
            <Message hidden={step > 3 ? false : true}>
              <Message.Header>Envoyé !</Message.Header>
              <p>
                Votre inscription a bien été enregistré.
              </p>
            </Message>
          </div>
            <Button onClick={this.nextStep} className={this.state.step > 3 ? 'hidden' : ''}>Confirmer</Button>
          </div>
        </div>
    )
  }
}

export default FormComponent