import React, { Component } from 'react'
import {
	PlotFunction,
	PlotFunctionInput
} from 'components'
/*
* This component depends on d3.js <= v3.0
*/
export default class PlotFunctionView extends Component {
	constructor (props) {
		super(props)
		this.setPlotData = this.setPlotData.bind(this)
		this.state = {
			plotData : {
				linear : {
					a : 1,
					b : 1
				},
				quadratic : {
					a : 1,
					b : 1,
					c : 0
				},
				functions : []
			}
		}
	}
	componentDidMount() {
		this.refs['plotFunctionComponent'].plotFunction(this.state.plotData)
	}
	setPlotData (plotData) {
		console.log('Got plotData ', plotData);
		this.setState({
			plotData : plotData
		}, function () {
			try {
				this.refs['plotFunctionComponent'].plotFunction(this.state.plotData)
			} catch (e) {
				this.refs['plotFunctionComponent'].showPlotFnError(e)
			}
		})
	}
	render() {
		return (
			<div className='row'>
				<div className='col-md-3'>
					<PlotFunctionInput setPlotData={this.setPlotData} plotData={this.state.plotData}/>
				</div>
				<div className='col-md-7'>
					<PlotFunction ref="plotFunctionComponent" plotData={this.state.plotData} />
				</div>
			</div>
		);
	}
}
