import React, {Component} from 'react'
import PropTypes from 'prop-types';
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {Button, Col, ControlLabel, Form, FormControl, FormGroup, Glyphicon, Row} from "react-bootstrap";
import * as actions from "./CertificatesApi";

class Certificate extends Component {

    constructor(props, context) {
        super(props, context);

        this.state = {
            resource: {},
            validationErrors: {},
            previousTitle: '',
            userConfirm: '',
            users: null,
            page: 1,
            sizePerPage: 10
        }
    };


    handleTitleChange = (e) => {
        const {resource} = this.state;
        this.setState({resource: {...resource, title: e.target.value}});
    };
    handleDescriptionChange = (e) => {
        const {resource} = this.state;
        this.setState({resource: {...resource, description: e.target.value}});
    };
    handleUserChange = (e) => {
        this.setState({userConfirm: e.target.value});
    };
    saveCertificate = (e) => {
        e.preventDefault();
        const {resource, userConfirm} = this.state;
        const validationErrors = {};
        if (Object.keys(resource).length > 0) {
            if (!resource.title || resource.title.length < 5)
                validationErrors.title = "invalid title";
            if (!resource.description || resource.description.length < 6)
                validationErrors.description = "invalid description";
            if (userConfirm !== resource.user)
                validationErrors.userConfirm = "users don't match";
        }
        if (Object.keys(validationErrors).length > 0) {
            this.setState({validationErrors});
        } else {
            this.props.actions.saveCertificate(resource, () => {
                this.context.router.history.push('/certificates');
            });
        }
    };

    reload() {
        const {page, sizePerPage} = this.state;
        this.props.actions.loadUsers({page: page, per_page: sizePerPage},
            users => this.setState({users, page, sizePerPage}));
    }

    componentDidMount() {
        const id = this.props.match.params.id;
        if (id != null) {
            this.loadCertificate(id, organizer => this.setState({resource: organizer}));
        } else {
            this.setState({resource: {}});
        }
        this.reload();
    };

    loadCertificate(id) {
        this.props.actions.loadCertificate(id,
            resource => this.setState({resource: resource, previousTitle: resource.title}));
    };

    getValidationState(id) {
        const {validationErrors} = this.state;
        if (validationErrors.title && id === 'title') {
            return 'error';
        }
        if (validationErrors.description && id === 'description') {
            return 'error';
        }
        if (validationErrors.userConfirm && id === 'userConfirm') {
            return 'error';
        }
        return null;
    }

    render() {
        const {resource, validationErrors, previousTitle, userConfirm, users} = this.state;
        return (
            <div>
                {resource && <Row className="vertical-middle breadcrumbs">
                    <Col xs={8}>
                        <h5>
                            <Glyphicon
                                glyph="cog"/> Admin > Certificates > {resource.id ?
                                <span><b>{previousTitle}</b> - edit</span> :
                                <span>New</span>}
                        </h5>
                    </Col>
                </Row>
                }
                {resource &&
                <Row id='form'>
                    <Col xs={12} md={6}>
                        <Form horizontal onSubmit={this.saveCertificate}>
                            <FormGroup
                                controlId="title"
                                validationState={this.getValidationState('title')}
                            >
                                <Col componentClass={ControlLabel} sm={2}>Certificate name</Col>
                                <Col sm={10}>
                                    <FormControl
                                        type="text"
                                        placeholder="Enter title"
                                        onChange={this.handleTitleChange}
                                    />
                                    {
                                        Object.keys(validationErrors).length > 0 && validationErrors.title &&
                                        <ControlLabel>{validationErrors.title}</ControlLabel>
                                    }
                                </Col>
                                <FormControl.Feedback/>
                            </FormGroup>
                            <FormGroup
                                controlId="description"
                                validationState={this.getValidationState('description')}
                            >
                                <Col componentClass={ControlLabel} sm={2}>Description</Col>
                                <Col sm={10}>
                                    <FormControl
                                        placeholder="Enter description"
                                        componentClass="textarea"
                                        rows="3"
                                        onChange={this.handleDescriptionChange}
                                    />
                                    {
                                        Object.keys(validationErrors).length > 0 && validationErrors.description &&
                                        <ControlLabel>{validationErrors.description}</ControlLabel>
                                    }
                                </Col>
                                <FormControl.Feedback/>
                            </FormGroup>
                            <FormGroup
                                controlId="formControlsSelect"
                                validationState={this.getValidationState('userConfirm')}
                            >
                                <Col componentClass={ControlLabel}
                                     sm={2}>User</Col>
                                <Col sm={10}>
                                    <FormControl componentClass="select" placeholder="select" value={userConfirm} onChange={this.handleUserChange}>
                                        <option value="select">Select user</option>
                                        <option value="select">{console.log(users)}</option>
                                    </FormControl>
                                </Col>
                                <FormControl.Feedback/>
                            </FormGroup>
                            <Col xsOffset={2} xs={10} className='form-buttons margin10'>
                                <Button type="submit" bsStyle={'success'}>Save</Button>
                                <Button
                                    bsStyle={'warning'}
                                    onClick={() => this.context.router.history.push(`/certificates`)}
                                >
                                    Cancel
                                </Button>
                            </Col>
                        </Form>
                    </Col>
                </Row>
                }

            </div>
        );
    }
}

Certificate.contextTypes = {
    router: PropTypes.object
};


const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(
        actions,
        dispatch)
});

export default connect(
    undefined,
    mapDispatchToProps
)(Certificate)