text: import React from "react";
  import { Link } from "react-router-dom";
  // JavaScript plugin that hides or shows a component based on your scroll
  import Headroom from "headroom.js";
  import classnames from "classnames";
  // reactstrap components
  import {
    Button,
    UncontrolledCollapse,
    DropdownMenu,
    DropdownItem,
    DropdownToggle,
    UncontrolledDropdown,
    Media,
    NavbarBrand,
    Navbar,
    NavItem,
    NavLink,
    Nav,
    Container,
    Row,
    Col,
    UncontrolledTooltip,
    Card,
    CardHeader,
    CardBody,
    FormGroup,
    Form,
    Input,
    InputGroupAddon,
    InputGroupText,
    InputGroup,
    Modal
  } from "reactstrap";
  
  class DemoNavbar extends React.Component {
    componentDidMount() {
      let headroom = new Headroom(document.getElementById("navbar-main"));
      // initialise
      headroom.init();
    }
    state = {
      collapseClasses: "",
      collapseOpen: false
    };
  
    onExiting = () => {
      this.setState({
        collapseClasses: "collapsing-out"
      });
    };
  
    onExited = () => {
      this.setState({
        collapseClasses: ""
      });
    };
    state = {};
    toggleModal = state => {
      this.setState({
        [state]: !this.state[state]
      });
    };
  
    render() {
      return (
        <>
          <header className="header-global">
            <Navbar
              className="navbar-main navbar-transparent navbar-light headroom"
              expand="lg"
              id="navbar-main"
            >
              <Container>
                <NavbarBrand className="mr-lg-5" to="/" tag={Link}>
                  <img
                    alt="..."
                    src={require("assets/img/brand/logo.png")}
                  />
                </NavbarBrand>
                <button className="navbar-toggler" id="navbar_global">
                  <span className="navbar-toggler-icon" />
                </button>
                <UncontrolledCollapse
                  toggler="#navbar_global"
                  navbar
                  className={this.state.collapseClasses}
                  onExiting={this.onExiting}
                  onExited={this.onExited}
                >
                  <div className="navbar-collapse-header">
                    <Row>
                      <Col className="collapse-brand" xs="6">
                        <Link to="/">
                          <img
                            alt="..."
                            src={require("assets/img/brand/argon-react.png")}
                          />
                        </Link>
                      </Col>
                      <Col className="collapse-close" xs="6">
                        <button className="navbar-toggler" id="navbar_global">
                          <span />
                          <span />
                        </button>
                      </Col>
                    </Row>
                  </div>
                  <Nav className="navbar-nav-hover align-items-lg-center" navbar>
                  
                    <UncontrolledDropdown nav>
                      <DropdownToggle nav>
                        <i className="ni ni-collection d-lg-none mr-1" />
                        <span className="nav-link-inner--text">Instituição</span>
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem to="/landing-page" tag={Link}>
                          Landing
                        </DropdownItem>
                        <DropdownItem to="/profile-page" tag={Link}>
                          Profile
                        </DropdownItem>
                        <DropdownItem to="/login-page" tag={Link}>
                          Login
                        </DropdownItem>
                        <DropdownItem to="/register-page" tag={Link}>
                          Register
                        </DropdownItem>
                      </DropdownMenu>
                    </UncontrolledDropdown>
  
                    <UncontrolledDropdown nav>
                      <DropdownToggle nav>
                        <i className="<i className="ni ni spaceship />
                        <span className="nav-link-inner--text">Portal</span>
                      </DropdownToggle>
                      <DropdownMenu className="dropdown-menu-xl">
                        <div className="dropdown-menu-inner">
                          <Media
                            className="d-flex align-items-center"
                            href="/aluno"
                            target="_blank"
                          >
                            <div className="icon icon-shape bg-gradient-primary rounded-circle text-white">
                              <i className="ni ni-spaceship" />
                            </div>
                            <Media body className="ml-3">
                              <h6 className="heading text-primary mb-md-1">
                                Aluno
                              </h6>
                              <p className="description d-none d-md-inline-block mb-0">
                                Acompanhe e realize suas atividades como se estivesse na sala
                                de aula
                              </p>
                            </Media>
                          </Media>
                          <Media
                            className="d-flex align-items-center"
                            href="/professor"
                            target="_blank"
                          >
                            <div className="icon icon-shape bg-gradient-success rounded-circle text-white">
                              <i className="fa fa-newspaper-o" />
                            </div>
                            <Media body className="ml-3">
                              <h6 className="heading text-primary mb-md-1">
                                Professor
                              </h6>
                              <p className="description d-none d-md-inline-block mb-0">
                                Gerencie suas classes, alunos e atividades de forma simples e organizada
                              </p>
                            </Media>
                          </Media>
                          <Media
                            className="d-flex align-items-center"
                            href="/admistrativo"
                            target="_blank"
                          >
                            <div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
                            <i className="ni ni-ui-04" />
                            </div>
                            <Media body className="ml-3">
                              <h5 className="heading text-warning mb-md-1">
                                Administrativo
                              </h5>
                              <p className="description d-none d-md-inline-block mb-0">
                                Administre as atividades e processos de toda a Instituição de Ensino
                              </p>
                            </Media>
                          </Media>
                        </div>
                      </DropdownMenu>
                    </UncontrolledDropdown>
  
                    <UncontrolledDropdown nav>
                      <DropdownToggle nav>
                        <i className="<i className="ni ni spaceship />
                        <span className="nav-link-inner--text">Biblioteca</span>
                      </DropdownToggle>
                      <DropdownMenu className="dropdown-menu-xl">
                        <div className="dropdown-menu-inner">
                          <Media
                            className="d-flex align-items-center"
                            href="/biblioteca"
                          >
                            <div className="icon icon-shape bg-gradient-primary rounded-circle text-white">
                              <i class="fa fa-clipboard" aria-hidden="true"></i>
                            </div>
                            <Media body className="ml-3">
                              <h6 className="heading text-primary mb-md-1">
                                Biblioteca Virtual
                              </h6>
                              <p className="description d-none d-md-inline-block mb-0">
                                Acesse os eBooks disponibilizados pela biblioteca de sua faculdade
                              </p>
                            </Media>
                          </Media>
                        </div>
                      </DropdownMenu>
                    </UncontrolledDropdown>
                  </Nav>
                  <Nav className="align-items-lg-center ml-lg-auto" navbar>
                    <NavItem>
                      <NavLink
                        className="nav-link-icon"
                        href="https://www.facebook.com/pages/FEPARFECIPAR/133484846662799"
                        id="tooltip333589074"
                        target="_blank"
                      >
                        <i className="fa fa-facebook-square" />
                        <span className="nav-link-inner--text d-lg-none ml-2">
                          Facebook
                        </span>
                      </NavLink>
                      <UncontrolledTooltip delay={0} target="tooltip333589074">
                      Conheça nossa Página
                      </UncontrolledTooltip>
                    </NavItem>
                    <NavItem>
                      <NavLink
                        className="nav-link-icon"
                        href="https://www.instagram.com/feparfecipar/"
                        id="tooltip356693867"
                        target="_blank"
                      >
                        <i className="fa fa-instagram" />
                        <span className="nav-link-inner--text d-lg-none ml-2">
                          Instagram
                        </span>
                      </NavLink>
                      <UncontrolledTooltip delay={0} target="tooltip356693867">
                      Acompanhe nosso Feed
                      </UncontrolledTooltip>
                    </NavItem>
                    <NavItem className="d-none d-lg-block ml-lg-4">
                      <Button
                        block
                        className="btn-neutral btn-icon"
                        color="default"
                        type="button"
                        onClick={() => this.toggleModal("formModal")}
                      >
                        <span className="btn-inner--icon">
                          <i className="fa fa-sign-in mr-2" />
                        </span>
                        <span className="nav-link-inner--text ml-1">
                          Entrar
                        </span>
                      </Button>
                      <Col md="4">
                        
              <Modal
                className="modal-dialog-centered"
                size="sm"
                isOpen={this.state.formModal}
                toggle={() => this.toggleModal("formModal")}
              >
                <div className="modal-body p-0">
                  <Card className="bg-secondary shadow border-0">
                    <CardHeader className="bg-white pb-5">
                      <div className="text-muted text-center mb-3">
                        <small>Entrar</small>
                      </div>
                    </CardHeader>
                    <CardBody className="px-lg-5 py-lg-5">
                      <div className="text-center text-muted mb-4">
                        <small>Digite suas credenciais</small>
                      </div>
                      <Form role="form">
                        <FormGroup
                          className={classnames("mb-3", {
                            focused: this.state.emailFocused
                          })}
                        >
                          <InputGroup className="input-group-alternative">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText>
                              <i class="fa fa-user" aria-hidden="true"></i>
                              </InputGroupText>
                            </InputGroupAddon>
                            <Input
                              placeholder="CPF"
                              type="text" maxlength="11"
                              
                              onFocus={e => this.setState({ emailFocused: true })}
                              onBlur={e => this.setState({ emailFocused: false })}
                              //pattern="\d{3}\.\d{3}\.\d{3}-\d{2}"
                              //data-mask="000.000.000-00" data-mask-selectonfocus="true"
                              // INSERIR ABAIXO SCRIPT DE MÁSCARA CPF
                            />
                          </InputGroup>
                        </FormGroup>
                        <FormGroup
                          className={classnames({
                            focused: this.state.passwordFocused
                          })}
                        >
                          <InputGroup className="input-group-alternative">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText>
                                <i className="ni ni-lock-circle-open" />
                              </InputGroupText>
                            </InputGroupAddon>
                            <Input
                              placeholder="Senha"
                              type="password"
                              autoComplete="off"
                              onFocus={e =>
                                this.setState({ passwordFocused: true })
                              } 
                              onBlur={e =>
                                this.setState({ passwordFocused: false })
                              }
                            />
                          </InputGroup>
                        </FormGroup>
                        <div className="custom-control custom-control-alternative custom-checkbox">
                          <input
                            className="custom-control-input"
                            id=" customCheckLogin"
                            type="checkbox"
                          />
                        </div>
                        <div className="text-center">
                          <Button className="my-4" color="primary" type="button">
                            Entrar
                          </Button>
                        </div>
                      </Form>
                    </CardBody>
                  </Card>
                </div>
              </Modal>
            </Col>
                    </NavItem>
                  </Nav>
                </UncontrolledCollapse>
              </Container>
            </Navbar>
          </header>
        </>
      );
    }
  }
  
  export default DemoNavbar;
  