import _                                  from 'lodash';
  import { Meteor }                         from 'meteor/meteor';
  import React, { Component }               from 'react';
  import { Link }                           from 'react-router';
  import { Avatar }                         from '/imports/client/components/Avatar';
  import { Icon }                           from '/imports/client/components/Icon';
  import classNames                         from 'classnames';
  
  import { logout }                         from '/imports/client/app/utils/loginMethods';

  import { VerifyModule }                   from '/imports/client/views/verify/module/index'

  
  import Signup                             from '/imports/client/views/nonOrg/enter/SignupView';

  import { Collapse, Navbar, NavbarToggler,
    NavbarBrand, Nav, NavItem, NavLink }    from 'reactstrap';

  
  export class AppLayout extends Component {

    constructor(props) {
      super(props);
  
      this.toggle = this.toggle.bind(this);
      this.state = {
        isOpen: false
      };
    }
    toggle() {
      this.setState({
        isOpen: !this.state.isOpen
      });
    }

    render() {
      const {user, org} = this.props.data;
      console.log(user);

      console.log(org);

      if(!user) {
        return (
          <Signup
          />
        );
      }
  
      if(!user.isEmailVerified()) {
        return (
          <VerifyModule
            pane      = {this.props.location.query.verify}
            location  = {this.props.location}
          />
        );
      }

      const theUrl = Meteor.absoluteUrl();
      OrgUrl = theUrl.replace("http://","http://"+org.slug+".");

      return (
        <div className = "appLayout-box">

          <Navbar color="faded" light toggleable>
            <NavbarToggler right onClick={this.toggle} />
            <NavbarBrand href="/">reactstrap</NavbarBrand>
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink href="/components/">Components</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
                </NavItem>
              </Nav>
            </Collapse>
          </Navbar>

          <div className = "appLayout-wrapOuter">
            <div className = "appLayout-wrapInner">
              <div className = "appLayout-menuWrap">
              </div>
              <div className = "appLayout-contentWrap">
                <div className = "appLayout-content">

                  Hi, {user.getFullName()},
                  Please visit your organization page by <a href={OrgUrl}>clicking here </a> and login using your credentials!

                </div>
              </div>
            </div>
          </div>
        </div>
      );
    };
  
  };