import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import Navbar from 'react-bootstrap/lib/Navbar';
import Button from 'react-bootstrap/lib/Button';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import FormControl from 'react-bootstrap/lib/FormControl';
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
import MenuItem from 'react-bootstrap/lib/MenuItem';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import FontAwesomeIcon from 'fm3/components/FontAwesomeIcon';

import { changesetsSetDays, changesetsSetAuthorNameAndRefresh } from 'fm3/actions/changesetsActions';
import { setTool } from 'fm3/actions/mainActions';

class ChangesetsMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      authorName: this.props.authorName,
    };
  }

  componentWillReceiveProps(nextProps) {
    const settingAuthorNameFromChangesetDetailToast = nextProps.authorName !== this.state.authorName && nextProps.days === this.props.days && nextProps.zoom === this.props.zoom;
    if (settingAuthorNameFromChangesetDetailToast) {
      this.setState({ authorName: nextProps.authorName });
    }
  }

  canSearchWithThisAmountOfDays =(amountOfDays) => {
    if (this.state.authorName) {
      return true;
    }
    const zoom = this.props.zoom;
    return (amountOfDays === 3 && zoom >= 9) || (amountOfDays === 7 && zoom >= 10) || (amountOfDays === 14 && zoom >= 11);
  }

  render() {
    const { days, onChangesetsSetDays, onChangesetsSetAuthorNameAndRefresh, onCancel } = this.props;
    return (
      <div>
        <Navbar.Form pullLeft>
          <ButtonGroup>
            <DropdownButton title={`Zmeny novšie ako ${days} dn${days === 3 ? 'i' : 'í'}`} id="days">
              {[3, 7, 14, 30].map(d => (
                <MenuItem key={d} disabled={!this.canSearchWithThisAmountOfDays(d)} onClick={() => (this.canSearchWithThisAmountOfDays(d) ? onChangesetsSetDays(d) : false)}>{d} dn{d === 3 ? 'i' : 'í'}</MenuItem>
              ))}
            </DropdownButton>
          </ButtonGroup>
          {' '}
          <FormGroup>
            <FormControl
              type="text"
              placeholder="Všetci autori"
              onChange={e => this.setState({ authorName: e.target.value === '' ? null : e.target.value })}
              value={this.state.authorName || ''}
            />
          </FormGroup>
          <Button
            bsSize="small"
            bsStyle="link"
            disabled={!this.state.authorName}
            onClick={() => this.setState({ authorName: null })}
          >
            <FontAwesomeIcon icon="times" />
          </Button>
          {' '}
          <ButtonGroup>
            <Button
              disabled={!this.canSearchWithThisAmountOfDays(days)}
              onClick={() => onChangesetsSetAuthorNameAndRefresh(this.state.authorName)}
              title="Stiahnuť zmeny"
            >
              <FontAwesomeIcon icon="refresh" /><span className="hidden-sm"> Stiahnuť zmeny</span>
            </Button>
          </ButtonGroup>
        </Navbar.Form>
        <Nav pullRight>
          <NavItem onClick={onCancel}><Glyphicon glyph="remove" /> Zavrieť</NavItem>
        </Nav>
      </div>
    );
  }
}

ChangesetsMenu.propTypes = {
  days: PropTypes.number.isRequired,
  zoom: PropTypes.number.isRequired,
  authorName: PropTypes.string,
  onChangesetsSetDays: PropTypes.func.isRequired,
  onChangesetsSetAuthorNameAndRefresh: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,
};

export default connect(
  state => ({
    days: state.changesets.days,
    authorName: state.changesets.authorName,
    zoom: state.map.zoom,
  }),
  dispatch => ({
    onChangesetsSetDays(days) {
      dispatch(changesetsSetDays(days));
    },
    onChangesetsSetAuthorNameAndRefresh(authorName) {
      dispatch(changesetsSetAuthorNameAndRefresh(authorName));
    },
    onCancel() {
      dispatch(setTool(null));
    },
  }),
)(ChangesetsMenu);

@@ -393,24 +393,81 @@
 FormGroup';%0A
+import InputGroup from 'react-bootstrap/lib/InputGroup';%0A
 import FormC
@@ -2334,32 +2334,59 @@
     %3CFormGroup%3E%0A
+            %3CInputGroup%3E%0A  
             %3CFor
@@ -2408,16 +2408,18 @@
         
+  
 type=%22te
@@ -2422,16 +2422,18 @@
 =%22text%22%0A
+  
         
@@ -2466,16 +2466,18 @@
 autori%22%0A
+  
         
@@ -2589,16 +2589,18 @@
         
+  
 value=%7Bt
@@ -2639,19 +2639,25 @@
         
+  
 /%3E%0A
+    
         
@@ -2663,37 +2663,26 @@
    %3C
-/FormGroup%3E%0A          %3C
+InputGroup.
 Button
+%3E
 %0A   
@@ -2694,50 +2694,26 @@
     
-bsSize=%22small%22%0A            bsStyle=%22link%22%0A
+    %3CButton%0A      
     
@@ -2758,32 +2758,38 @@
 me%7D%0A            
+ 
+     
 onClick=%7B() =%3E t
@@ -2826,34 +2826,43 @@
 l %7D)%7D%0A          
-%3E%0A
+      %3E%0A   
             %3CFon
@@ -2849,32 +2849,35 @@
 %0A               
+   
 %3CFontAwesomeIcon
@@ -2895,32 +2895,38 @@
 s%22 /%3E%0A          
+      
 %3C/Button%3E%0A      
@@ -2911,32 +2911,116 @@
       %3C/Button%3E%0A
+              %3C/InputGroup.Button%3E%0A            %3C/InputGroup%3E%0A          %3C/FormGroup%3E%0A
           %7B' '%7D%0A

make clear chset author button look good on mobile too