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

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

        const profile = this.props.profileInfo;
        this.state = {
            name: profile.name,
            phone: profile.phone,
            idUserType: profile.idUserType,
            id: profile.id
        };
        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(saveProfileInfo(this.props.idUser, this.state));
        event.preventDefault();
    }

    render() {
        const {name, phone} = this.state;
        return (
            <div>
                <div id="profile-edit" className="edit-content">
                    <Row>
                        <Col>
                            <h5>{profileTexts.labels.PROFILE_EDIT_TITLE}</h5>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <Form onSubmit={this.handleSubmit} className="profile-edit-content">
                                <FormGroup row>
                                      <Label xl="2" for="profile-name">{profileTexts.labels.PROFILE_NAME}</Label>
                                      <Col xl="4">
                                          <Input value={name}
                                              onChange={this.handleChange}
                                              type="text"
                                              name="name"
                                              id="profile-name"
                                              placeholder={profileTexts.labels.PROFILE_NAME} />
                                      </Col>

                                </FormGroup>
                                <FormGroup row>
                                      <Label xl="2" for="profile-phone">{profileTexts.labels.PROFILE_PHONE}</Label>
                                      <Col xl="4">
                                          <Input value={phone}
                                              onChange={this.handleChange}
                                              type="text"
                                              name="phone"
                                              id="profile-phone"
                                              placeholder={profileTexts.labels.PROFILE_PHONE} />
                                      </Col>

                                </FormGroup>
                                <Button color="secondary" className="save-profile-btn wiaas-button">{profileTexts.buttons.SAVE}</Button>
                            </Form>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    }
}

export default connect()(ProfileEditContainer);
