import { get, pick } from "lodash-es";
import React from "react";
import { Col, Modal, Row } from "react-bootstrap";
import { connect } from "react-redux";
import { pushState } from "../../app/actions";
import { InputError, SaveButton } from "../../base";
import { clearError } from "../../errors/actions";

import { editSample } from "../actions";

const getInitialState = ({ name, isolate, host, locale }) => ({
    name: name || "",
    isolate: isolate || "",
    host: host || "",
    locale: locale || "",
    error: ""
});

class EditSample extends React.Component {
    constructor(props) {
        super(props);
        this.state = getInitialState(this.props);
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (prevState.error !== nextProps.error) {
            return { error: nextProps.error };
        }
        return null;
    }

    handleChange = e => {
        const { name, value } = e.target;
        this.setState({
            [name]: value,
            error: ""
        });

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

    handleModalEnter = () => {
        this.setState(getInitialState(this.props));
    };

    handleModalHide = () => {
        if (this.props.error) {
            this.props.onClearError("UPDATE_SAMPLE_ERROR");
        }
        this.props.onHide();
    };

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

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

        this.props.onEdit(this.props.id, pick(this.state, ["name", "isolate", "host", "locale"]));
    };

    render() {
        return (
            <Modal show={this.props.show} onEnter={this.handleModalEnter} onHide={this.handleModalHide}>
                <Modal.Header onHide={this.props.onHide} closeButton>
                    Edit Sample
                </Modal.Header>
                <form onSubmit={this.handleSubmit}>
                    <Modal.Body>
                        <Row>
                            <Col xs={12}>
                                <InputError
                                    label="Name"
                                    name="name"
                                    value={this.state.name}
                                    onChange={this.handleChange}
                                    error={this.state.error}
                                />
                            </Col>
                        </Row>

                        <Row>
                            <Col xs={12} md={6}>
                                <InputError
                                    label="Isolate"
                                    name="isolate"
                                    value={this.state.isolate}
                                    onChange={this.handleChange}
                                />
                            </Col>
                            <Col xs={12} md={6}>
                                <InputError
                                    label="Host"
                                    name="host"
                                    value={this.state.host}
                                    onChange={this.handleChange}
                                />
                            </Col>
                        </Row>

                        <Row>
                            <Col xs={12} md={6}>
                                <InputError
                                    name="locale"
                                    label="Locale"
                                    value={this.state.locale}
                                    onChange={this.handleChange}
                                />
                            </Col>
                        </Row>
                    </Modal.Body>
                    <Modal.Footer>
                        <SaveButton />
                    </Modal.Footer>
                </form>
            </Modal>
        );
    }
}

const mapStateToProps = state => ({
    ...state.samples.detail,
    show: get(state.router.location.state, "editSample", false),
    error: get(state, "errors.UPDATE_SAMPLE_ERROR.message", "")
});

const mapDispatchToProps = dispatch => ({
    onHide: () => {
        dispatch(pushState({ showEdit: false }));
    },

    onEdit: (sampleId, update) => {
        dispatch(editSample(sampleId, update));
    },

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

export default connect(mapStateToProps, mapDispatchToProps)(EditSample);

@@ -76,15 +76,8 @@
 Col,
- Modal,
  Row
@@ -220,16 +220,55 @@
 veButton
+, ModalDialog, DialogBody, DialogFooter
  %7D from 
@@ -1769,16 +1769,114 @@
   %3CModal
+Dialog%0A                label=%22EditSample%22%0A                headerText=%22Edit Sample%22%0A               
  show=%7Bt
@@ -1890,16 +1890,32 @@
 ps.show%7D
+%0A               
  onEnter
@@ -1942,172 +1942,67 @@
 ter%7D
- onHide=%7Bthis.handleModalHide%7D%3E%0A                %3CModal.Header onHide=%7Bthis.props.onHide%7D closeButton%3E%0A                    Edit Sample%0A                %3C/Modal.Header
+%0A                onHide=%7Bthis.handleModalHide%7D%0A            
 %3E%0A  
@@ -2072,22 +2072,22 @@
        %3C
-Modal.
+Dialog
 Body%3E%0A  
@@ -3900,22 +3900,22 @@
       %3C/
-Modal.
+Dialog
 Body%3E%0A  
@@ -3933,22 +3933,22 @@
        %3C
-Modal.
+Dialog
 Footer%3E%0A
@@ -4012,14 +4012,14 @@
   %3C/
-Modal.
+Dialog
 Foot
@@ -4065,16 +4065,22 @@
  %3C/Modal
+Dialog
 %3E%0A      

Replace bootstrap modal in Sample Edit Component