/** @module Header */

import React, { memo } from "react";
import PropTypes from "prop-types";
import {
  Container,
  Collapse,
  Nav,
  NavItem,
  Navbar,
  NavbarBrand,
  NavbarToggler,
  Row,
  Col
} from "reactstrap";
import { ButtonBase } from "@material-ui/core";

import * as types from "../Types/types";
import { bootstrapSizes } from "../Data/data";

import HeaderLinkList from "./HeaderLinkList";
import HeaderSearchForm from "./HeaderSearchForm";

/**
 * @function Header
 * @description Functional Presentation component for Header
 * @returns {React.Component} - Rendered component.
 */
const Header = memo(props => {
  const {
    isNavOpen,
    toggleNav,
    pagesObject,
    pagesObject: { maxWidth, mobileThreshold, utilComponents, searchObject }
  } = props;

  /**
   * @function UtilButtons
   * @description generates dynamic list of utility buttons based on pagesObject
   * @returns {React.Component}
   */
  const UtilButtons = () => {
    const utilButtons = utilComponents.map((button, index) => {
      const key = `button_${index}`;
      return <NavItem key={key}>{button}</NavItem>;
    });
    return (
      <Nav
        className={`d-inline d-${bootstrapSizes[mobileThreshold]}-flex ml-auto nav-icons`}
      >
        {utilButtons}
      </Nav>
    );
  };

  return (
    <Navbar
      data-test="presentation-header"
      dark
      expand={bootstrapSizes[mobileThreshold]}
      fixed="top"
      className="p-0"
    >
      <Container className={`${maxWidth ? "container_max" : ""}`}>
        <NavbarToggler
          data-test="button-toggle-nav"
          className="ml-5"
          onClick={() => toggleNav()}
        />
        <NavbarBrand
          className="ml-auto d-inline"
          href="http://www.trinidadbenham.com"
          target="_new"
        >
          <ButtonBase
            className={`tbc-logo ${
              searchObject.enabled ? "withSearch" : "woSearch"
            }`}
          />
        </NavbarBrand>
        <Collapse isOpen={isNavOpen} navbar>
          <Col>
            {searchObject.enabled && (
              <HeaderSearchForm searchObject={searchObject} />
            )}
            <Row className="m-0">
              <HeaderLinkList
                pagesObject={pagesObject}
                toggleNav={toggleNav}
                isNavOpen={isNavOpen}
              />
            </Row>
          </Col>
          <UtilButtons />
        </Collapse>
      </Container>
    </Navbar>
  );
});

Header.propTypes = {
  pagesObject: types.pagesObject.types,
  isNavOpen: PropTypes.bool,
  toggleNav: PropTypes.func
};

Header.defaultProps = {
  pagesObject: types.pagesObject.defaults,
  isNavOpen: false,
  toggleNav: () => {}
};

export default Header;