import './Navbar.css';

import PropTypes from 'prop-types';

import React, { Component } from 'react';

import { connect } from 'react-redux';

import { withRouter } from 'react-router';

import { bindActionCreators } from 'redux';

// import logo from './logo.svg';

import { NavDropdown, MenuItem, Modal} from 'react-bootstrap';

import * as authActions from '../actions/authActions';

import { forceSync } from '../actions/networkActions';

import { groupSetCurrent } from '../actions/groupActions';

import { isAuthenticated, getCurrentUser, getOnline, getCurrentGroup, getGroups } from '../selectors/authSelectors';

import { isSynchronizing, isSynchronized } from '../selectors/syncSelectors';

const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => {

  const onClickSettings = (e) => {

    e.preventDefault();

    history.push('/settings');

  }

  const onClickLogin = (e) => {

    e.preventDefault();

    history.push('/login');

  }

  if (isAuthenticated) {

    return (

          <NavDropdown title={ currentUser.get('username') }>

              <li>

              </li>

              <li>

              </li>

          </NavDropdown>

    );

  }

  return (

      <li>

      </li>

  );

}

const Online = ({ online }) => {

  return (

    <li>

      <a>

      </a>

    </li>

  )

}

const SyncButton = ({ isAuthenticated, onSyncClick, isSynchronizing, isSynchronized, id }) => {

  const classnames = "material-icons"

    + ((!isSynchronized)?" sync-button-not-synchronized":"")

    + ((isSynchronizing)?" sync-button-synchronizing":"");

  let title = "Synchronize";

  let clickCb = onSyncClick;

  if(isSynchronizing) {

    title = "Synchronizing...";

    clickCb = () => {};

  } else if (!isSynchronized) {

    title += ": not synchronized";

  }

  if (isAuthenticated) {

    return (

      <li>

        <a title={title} onClick={clickCb} id={id || null}>

        <span className={classnames}>&#xE627;</span> </a>

      </li>

    );

  }

  return (

      <li>

        <a>

          <span></span>

        </a>

    </li>

  );

}

const GroupStatus = ({currentGroup, groups, onSelect}) => {

  if(currentGroup) {

    const currentGroupName = currentGroup.get('name');

    return (

        { groups && groups.map((group, key) => {

            const groupName = group.get('name');

            const className = (groupName === currentGroupName)?'active':null;

          return <MenuItem id="groups" className={className} key={key} eventKey={groupName}>{ groupName }</MenuItem>

          }

        )}

        <MenuItem key="-1" eventKey="__create_group__">Créer un groupe...</MenuItem>

      </NavDropdown>

    )

  } else {

    return null;

  }

}

class AppNavbar extends Component {

  state = {

    showModal: false

  }

  closeModal = () => {

    this.setState({ showModal: false });

  }

  onClickHome = (e) => {

    e.preventDefault();

    this.props.history.push('/');

  }

  isSynchronized = () => {

    return this.props.isSynchronized;

  }

  onClickLogout = (e) => {

    e.preventDefault();

    const isSynchronized = this.isSynchronized();

    if (isSynchronized) {

      this.logout();

    } else {

      this.setState({ showModal: true })

    }

  }

  confirmLogout = () => {

    const isSynchronized = this.isSynchronized();

    if (!isSynchronized) {

      this.props.authActions.resetAll();

    }

    this.logout();

    this.closeModal();

  }

  logout = () => {

    this.props.authActions.logout();

    this.props.history.push('/');

  }

  onClickSessions = (e) => {

    e.preventDefault();

    this.props.history.push('/sessions');

  }

  onSyncClick = (e) => {

    e.preventDefault();

    this.props.networkActions.forceSync();

  }

  onGroupSelect = (groupName) => {

    if(groupName === "__create_group__") {

      this.props.history.push('/create-group');

    } else {

      this.props.groupActions.groupSetCurrent(groupName);

    }

  }

  render() {

    return (

      <nav className="navbar navbar-inverse navbar-fixed-top">

        <div className="container-fluid">

          <div className="navbar-header">

            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

              <span className="sr-only">Toggle navigation</span>

              <span className="icon-bar"></span>

              <span className="icon-bar"></span>

              <span className="icon-bar"></span>

            </button>

          </div>

          <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul className="nav navbar-nav">

              <li>

              </li>

            </ul>

            <ul className="nav navbar-nav navbar-right">

              <GroupStatus currentGroup={this.props.currentGroup} groups={this.props.groups} onSelect={this.onGroupSelect}/>

              <SyncButton id='sync-button' isAuthenticated={this.props.isAuthenticated} onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing} isSynchronized={this.props.isSynchronized} />

              <Online {...this.props} />

              <LoginNav {...this.props} onLogout={this.onClickLogout} />

            </ul>

          </div>

          <Modal show={this.state.showModal} onHide={this.closeModal}>

            <Modal.Body>

              <p className="text-center">

                Certaines données n'ont pas encore été sauvegardées.

                <br />

                Si vous continuez, elles seront perdues.

              </p>

            </Modal.Body>

            <Modal.Footer>

              <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button>

              <button type="submit" className="btn btn-default btn-lg" onClick={this.closeModal}>Fermer</button>

            </Modal.Footer>

          </Modal>

        </div>

      </nav>

    );

  }

}

AppNavbar.propTypes = {

  isAuthenticated: PropTypes.bool.isRequired

};

function mapStateToProps(state, props) {

  return {

    isAuthenticated: isAuthenticated(state),

    currentUser: getCurrentUser(state),

    online: getOnline(state),

    isSynchronizing: isSynchronizing(state),

    isSynchronized: isSynchronized(state),

    currentGroup: getCurrentGroup(state),

    groups: getGroups(state)

  };

}

function mapDispatchToProps(dispatch) {

  return {

    authActions: bindActionCreators(authActions, dispatch),

    networkActions: bindActionCreators({ forceSync }, dispatch),

    groupActions: bindActionCreators({ groupSetCurrent }, dispatch)

  }

}

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