import React from "react";
import { connect } from "react-redux";
import { push } from "react-router-redux";
import { withRouter } from "react-router-dom";
import { Row, Col, Modal, ButtonToolbar } from "react-bootstrap";
import { get, upperFirst } from "lodash-es";

import { InputError, Button } from "../../base";
import { createOTU } from "../actions";
import { clearError } from "../../errors/actions";

const getInitialState = (props) => ({
    name: "",
    abbreviation: "",
    errorName: "",
    errorAbbreviation: "",
    error: props.error
});

class CreateOTU extends React.Component {

    constructor (props) {
        super(props);
        this.state = getInitialState(this.props);
    }

    static getDerivedStateFromProps (nextProps, prevState) {
        console.log("prevState: ", prevState.error, ", nextProps: ", nextProps.error);
        if (prevState.error !== nextProps.error) {
            if (nextProps.error === "Name already exists") {
                return { errorName: nextProps.error };
            } else if (nextProps.error === "Abbreviation already exists") {
                return { errorAbbreviation: nextProps.error };
            } else if (!nextProps.error.length) {
                return { error: "" };
            }

            return {
                errorName: "Name already exists",
                errorAbbreviation: "Abbrevation already exists"
            };
        }

        return null;
    }

    handleChange = (e) => {
        const { name, value } = e.target;
        const error = `error${upperFirst(name)}`;

        this.setState({
            [name]: value,
            [error]: ""
        });

        if (this.props.error) {
            this.props.onClearError("CREATE_OTU_ERROR");
        }
    };

    handleHide = () => {
        this.props.onHide(this.props);
    };

    handleModalExited = () => {
        this.setState(getInitialState(this.props));

        if (this.props.error) {
            this.props.onClearError("CREATE_OTU_ERROR");
        }
    };

    handleSubmit = (e) => {
        e.preventDefault();

        if (!this.state.name) {
            return this.setState({
                errorName: "Required Field"
            });
        }

        console.log("submit: ", this.state.name, this.state.abbreviation);

        if (!this.state.errorName || !this.state.errorAbbreviation) {
            this.props.onSubmit(this.props.refId, this.state.name, this.state.abbreviation);
        }

    };

    render () {

        return (
            <Modal show={this.props.show} onHide={this.handleHide} onExited={this.handleModalExited}>
                <Modal.Header onHide={this.props.onHide} closeButton>
                    Create OTU
                </Modal.Header>
                <form onSubmit={this.handleSubmit}>
                    <Modal.Body>
                        <Row>
                            <Col md={8}>
                                <InputError
                                    label="Name"
                                    name="name"
                                    value={this.state.name}
                                    onChange={this.handleChange}
                                    error={this.state.errorName}
                                />
                            </Col>
                            <Col md={4}>
                                <InputError
                                    label="Abbreviation"
                                    name="abbreviation"
                                    value={this.state.abbreviation}
                                    onChange={this.handleChange}
                                    error={this.state.errorAbbreviation}
                                />
                            </Col>
                        </Row>

                    </Modal.Body>

                    <Modal.Footer>
                        <ButtonToolbar className="pull-right">
                            <Button icon="save" type="submit" bsStyle="primary">
                                Save
                            </Button>
                        </ButtonToolbar>
                    </Modal.Footer>
                </form>
            </Modal>
        );
    }
}

const mapStateToProps = state => ({
    show: !!state.router.location.state && state.router.location.state.createOTU,
    error: get(state, "errors.CREATE_OTU_ERROR.message", ""),
    pending: state.otus.createPending,
    refId: state.references.detail.id
});

const mapDispatchToProps = dispatch => ({

    onSubmit: (refId, name, abbreviation) => {
        dispatch(createOTU(refId, name, abbreviation));
    },

    onHide: ({ location }) => {
        dispatch(push({...location, state: {createOTU: false}}));
    },

    onClearError: (error) => {
        dispatch(clearError(error));
    }

});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(CreateOTU));

@@ -427,21 +427,16 @@
 tate = (
-props
 ) =%3E (%7B%0A
@@ -528,27 +528,18 @@
  error: 
-props.error
+%22%22
 %0A%7D);%0A%0Acl
@@ -664,26 +664,16 @@
 alState(
-this.props
 );%0A    %7D
@@ -739,95 +739,8 @@
 ) %7B%0A
-        console.log(%22prevState: %22, prevState.error, %22, nextProps: %22, nextProps.error);%0A
     
@@ -882,16 +882,40 @@
 rorName:
+ nextProps.error, error:
  nextPro
@@ -1045,16 +1045,40 @@
 viation:
+ nextProps.error, error:
  nextPro
@@ -1183,33 +1183,32 @@
 ;%0A            %7D%0A
-%0A
             retu
@@ -1325,16 +1325,56 @@
  exists%22
+,%0A                error: nextProps.error
 %0A       
@@ -1383,33 +1383,32 @@
    %7D;%0A        %7D%0A
-%0A
         return n
@@ -1877,26 +1877,16 @@
 alState(
-this.props
 ));%0A%0A   
@@ -2188,84 +2188,8 @@
  %7D%0A%0A
-        console.log(%22submit: %22, this.state.name, this.state.abbreviation);%0A%0A
     

Fix create otu error handling