/**
 * @license
 * The MIT License (MIT)
 * Copyright 2015 Government of Canada
 *
 * @author
 * Ian Boyes
 *
 * @exports HTTPOptions
 */

import React from "react";
import { connect } from "react-redux";
import { Row, Col, Panel } from "react-bootstrap";

import { updateSettings } from "../../actions";
import { Icon, InputSave } from "virtool/js/components/Base";

const HTTPOptions = (props) => {

    const footer = (
        <small className="text-warning">
            <Icon name="warning" /> Changes to these settings will only take effect when the server is reloaded.
        </small>
    );

    return (
        <Row>
            <Col xs={12}>
                <h5><strong>HTTP Server</strong></h5>
            </Col>
            <Col xs={12} md={6} mdPush={6}>
                <Panel footer={footer}>
                    Change the address and port the the web server listens on.
                </Panel>
            </Col>
            <Col xs={12} md={6} mdPull={6}>
                <Panel>
                    <InputSave
                        name="server_host"
                        label="Host"
                        autoComplete={false}
                        onSave={e => props.onChangeHost(e.value)}
                        initialValue={props.host}
                    />
                    <InputSave
                        name="server_port"
                        label="Port"
                        type="number"
                        autoComplete={false}
                        onSave={event => props.onChangePort("server_port", event.value)}
                        initialValue={props.port}
                    />
                </Panel>
            </Col>
        </Row>
    );
};

const mapStateToProps = (state) => {
    return {
        host: state.settings.data.server_host,
        port: state.settings.data.server_port
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        onChangeHost: (host) => {
            dispatch(updateSettings({server_host: host}));
        },

        onChangePort: (port) => {
            dispatch(updateSettings({server_port: Number(port)}));
        }
    };
};

const Container = connect(mapStateToProps, mapDispatchToProps)(HTTPOptions);

export default Container;

@@ -159,16 +159,51 @@
 react%22;%0A
+import %7B toNumber %7D from %22lodash%22;%0A
 import %7B
@@ -307,17 +307,16 @@
 eSetting
-s
  %7D from 
@@ -369,18 +369,16 @@
 om %22
-virtool/js
+../../..
 /com
@@ -1063,51 +1063,8 @@
 ave%0A
-                        name=%22server_host%22%0A
     
@@ -1186,21 +1186,21 @@
 props.on
-Chang
+Updat
 eHost(e.
@@ -1315,51 +1315,8 @@
 ave%0A
-                        name=%22server_port%22%0A
     
@@ -1464,20 +1464,16 @@
 nSave=%7Be
-vent
  =%3E prop
@@ -1480,39 +1480,20 @@
 s.on
-Chang
+Updat
 ePort(
-%22server_port%22, event
+e
 .val
@@ -1863,21 +1863,21 @@
   on
-Chang
+Updat
 eHost: (
 host
@@ -1872,20 +1872,21 @@
 eHost: (
-host
+value
 ) =%3E %7B%0A 
@@ -1914,27 +1914,26 @@
 pdateSetting
-s(%7B
+(%22
 server_host:
@@ -1935,15 +1935,16 @@
 host
-: host%7D
+%22, value
 ));%0A
@@ -1969,21 +1969,21 @@
   on
-Chang
+Updat
 ePort: (
 port
@@ -1978,20 +1978,21 @@
 ePort: (
-port
+value
 ) =%3E %7B%0A 
@@ -2028,11 +2028,10 @@
 ting
-s(%7B
+(%22
 serv
@@ -2041,23 +2041,26 @@
 port
-: 
+%22, to
 Number(
-port)%7D
+value)
 ));%0A

Fix HTTP settings component