import React, { Component } from 'react'

import Luhn from './luhn.js'

class  Input extends Component {

	 constructor(props, context) {
      super(props, context);

      this.state = {
        labelClassName : 'position-relative pr-1 pl-1',
        libelClassName : 'position-fixed row ml-1',
        value : '',
        validSiren : false,
        validIcon : 'invisible',
        errorIcon : 'invisible',
      }

    	this.valid = this.valid.bind(this)
    	this.error = this.error.bind(this)
    }

	handleChange(e) {
		this.setState({value : e.target.value })
	}

	valid() {
		(!this.state.validSiren)
			? this.setState({ validSiren : true })
			: true
	}

	error() {
		(this.state.validSiren)
      ? this.setState({ validSiren : false })
      : true
	}

	render() {
		return (
			<div>

			    <input 	type="number"
			           	id={input.id}
    			     		onChange={this.handleChange.bind(this)}/>

          {(this.state.value.length === 9)
            ? <Luhn siren={this.state.value}
                valid={this.valid}
                error={this.error} />
            : true }

          <i id='errorCheck' className={`fa fa-exclamation-triangle checked ${this.state.errorIcon}` } aria-hidden="true"></i>
          <i id='validCheck' className={`fa fa-check-circle checked ${this.state.validIcon}` } aria-hidden="true"></i>

			</div>
		)
	}
}

export default Input