import React from 'react';
import * as State from './../state'
import * as steps from '../steps'
import { connect } from 'react-redux'
import {List, Accordion, Statistic, Grid, Icon,Divider, Input, Label, Button } from 'semantic-ui-react'

import './ForEvery.scss'

export class Type extends React.Component {
	constructor(props) {
		super(props)
	}
	onChange = (evt, data) =>{
		this.props.onChange(data['value'])
	}
	render() {
		return <Input fluid value={this.props.value} onChange={this.onChange} labelPosition='left' type='text' placeholder={this.props.placeholder}>

			<Label className="TypeName">{this.props.name}</Label>

			<input className="Variable" />
			{/*
			    <Checkbox onClick={this.onClick} />
			    */}

		</Input>
	}
}

const mapPropsForForEveryStep = (currentState, ownProps) => {
	return  {
		arr:currentState['stepsData'][ownProps.stepCounter]['inputs']['Array'],
		loopVariable:currentState['stepsData'][ownProps.stepCounter]['inputs']['Loop Variable']
	}
}

const mapDispatchForForEveryStep = (dispatch, ownProps) =>{
	return {
		onInputChange : 
			(key, value)=> {
				dispatch(State.getUpdateStepInputAction(
							ownProps.stepCounter, 
							key,value))
			}
	}
}

export class ForEveryStep extends React.Component {
	constructor(props) {
		super(props)
	}
	onChange = (key,value) => {
		this.props.onInputChange(key,value)
	}
	render() {
		return <div className="ForEveryContent">
			<Divider horizontal>Inputs</Divider>
			<Type onChange={(value) => {
				this.onChange('Array', value)
				
			}} name="Array" value={this.props.arr} placeholder=""/>
			<Type onChange={(value) => {
				this.onChange('Loop Variable', value)
			}} name="Loop variable" value={this.props.loopVariable} placeholder=""/>

			</div>
	}
}

export var StateForEveryStep = connect(mapPropsForForEveryStep,mapDispatchForForEveryStep)(ForEveryStep)
