import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col, Form, FormGroup, Label, Input, Button} from 'reactstrap';
import {saveCompanyInfo} from '../../actions/profileSettings/profileSettingsActions';
import {profileTexts} from '../../constants/profileSettingsConstants';

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

        const profile = this.props.profileInfo;
        this.state = {
            idCompany: profile.idCompany,
            vatCode: profile.vatCode,
            companyName: profile.companyName
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const field = event.target.name;
        const profile = {};
        profile[field] = event.target.value;
        return this.setState(profile);
    }

    handleSubmit(event) {
        this.props.dispatch(saveCompanyInfo(this.props.idUser, this.state));
        event.preventDefault();
    }

    render() {
        const {companyName, vatCode} = this.state;

        return (
            <div>
                <div id="company-edit" className="edit-content">
                    <Row>
                        <Col>
                            <h5>{profileTexts.labels.COMPANY_EDIT_TITLE}</h5>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Form onSubmit={this.handleSubmit} className="company-edit-content">
                                <FormGroup row>
                                      <Label xl="2" for="company-name">{profileTexts.labels.COMPANY_NAME}</Label>
                                      <Col xl="4">
                                          <Input  value={companyName}
                                              onChange={this.handleChange}
                                              type="text"
                                              name="companyName"
                                              id="company-name"
                                              placeholder={profileTexts.labels.COMPANY_NAME} />
                                      </Col>

                                </FormGroup>
                                <FormGroup row>
                                      <Label xl="2" for="company-vat">{profileTexts.labels.VAT_CODE}</Label>
                                      <Col xl="4" lg="6" md="6">
                                          <Input value={vatCode}
                                              onChange={this.handleChange}
                                              type="text"
                                              name="vatCode"
                                              id="company-vat"
                                              placeholder={profileTexts.labels.VAT_CODE} />
                                      </Col>
                                </FormGroup>
                                <Button color="secondary" className="save-company-btn wiaas-button">{profileTexts.buttons.SAVE}</Button>
                            </Form>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    }
}

export default connect()(CompanyEditContainer);