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

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 mapPropsForAssertStep = (currentState, ownProps) => {
	return {
		expr: currentState['stepsData'][ownProps.stepCounter]['inputs']['expr']
	}
}

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

export class AssertStep extends React.Component {
	constructor(props) {
		super(props)
	}
	onChange = (key,value) => {
		this.props.onInputChange(key,value)
	}
	render() {
		return <div className="AssertContent">
			<Divider horizontal>Inputs</Divider>
			<Type onChange={(value) => {
				this.onChange('expr', value)
				
			}} name="expr" value={this.props.expr} placeholder=""/>

			</div>
	}
}

export var StateAssertStep = connect(mapPropsForAssertStep, mapDispatchForAssertStep)(AssertStep)

