import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Form, FormGroup, Label, Input, Button} from 'reactstrap';
import {addProject} from '../../../actions/orderProjects/orderProjectsActions';

class AddOrderProject extends Component {
    constructor(props) {
        super(props);

        this.state = {
            projectName: ''
        }

        this.onProjectAdd = this.onProjectAdd.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        const field = event.target.name;
        const newProjectData = Object.assign({}, this.state);
        newProjectData[field] = event.target.value;
        this.setState(newProjectData);
    }

    onProjectAdd(){
        this.props.dispatch(addProject(this.state));
    }

    render() {
        return (<Form>
            <FormGroup>
                <Label for="projectName">Project Name <span className="required-icon">*</span></Label>
                <Input
                    type="text"
                    onChange={this.handleChange}
                    name="projectName"
                    id="projectName"
                    value={this.state.projectName}
                    placeholder="Project Name"/>
            </FormGroup>
            <FormGroup>
                <Button onClick={this.onProjectAdd}>Add Project</Button>
            </FormGroup>
        </Form>);
    }
}


export default connect()(AddOrderProject);