{"size": 2497, "ext": "js", "max_stars_repo_path": "app/src/components/Navigation.js", "max_stars_repo_name": "civicparty/capmetro-game-1", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "app/src/components/Navigation.js", "max_issues_repo_name": "civicparty/capmetro-game-1", "max_issues_repo_issues_event_min_datetime": "2017-03-16T06:30:44.000Z", "max_issues_repo_issues_event_max_datetime": "2017-04-13T07:18:15.000Z", "max_forks_repo_path": "app/src/components/Navigation.js", "max_forks_repo_name": "civicparty/capmetro", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 11, "max_forks_count": null, "avg_line_length": 28.0561797753, "max_line_length": 124, "alphanum_fraction": 0.6103323989}
import React from 'react'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types';

import NavAmounts from './NavAmounts'
import ServiceFundsAvailable from './ServiceFundsAvailable'

import avatar from '../images/avatar.svg'
import back from '../images/back.svg'
import close from '../images/close.svg'

const Navigation = (props) => {
  const {
    centerText,
    history,
    showClose,
    showBack,
    showUser,
    showBudget,
    amounts,
    user,
  } = props

  const totalBudget = amounts && amounts.budgetAmount
  const totalCosts = amounts && amounts.totalCosts
  const peakDailyCapacity = amounts && amounts.peakDailyCapacity

  return (
    <nav className="Navigation">
      {
        showBack &&
          <Link to="/dashboard" className="flex">
            <img
              src={back}
              alt="Go Back to Dashboard"
              className="Navigation__icon--left"
            />
          </Link>
      }
      {
        showUser &&
          <div className="Navigation__user-container">
            <Link to="/user">
              <img src={(user && user.photoURL) || avatar} alt="User Account" className="Navigation__icon--left" />
            </Link>
          </div>
      }
      { peakDailyCapacity > 0 && <NavAmounts header="Peak Hours Capacity" amount={peakDailyCapacity} numStyle="decimal" /> }
      { totalCosts > 0 && <NavAmounts header="Total Costs" amount={totalCosts} /> }
      { totalBudget && <NavAmounts header="Total Budget" amount={totalBudget} /> }
      {
        showClose &&
          <div className="Navigation__special-header">
            <div className="flex Navigation__center-text">{centerText}</div>
            <div className="flex">
              <img
                src={close} alt="Go Back to Department"
                className="Navigation__icon--right"
                onClick={history.goBack}
              />
            </div>
          </div>
      }
    </nav>
  )
}

export default Navigation

Navigation.propTypes = {
  showClose: PropTypes.bool,
  showBack: PropTypes.bool,
  showUser: PropTypes.bool,
  showTotalFunds: PropTypes.bool,
  showServiceFunds: PropTypes.bool,
  funds: PropTypes.shape({
    generalFund: PropTypes.number,
    servicesSum: PropTypes.number,
    generalFund2016: PropTypes.number,
  }),
  service: PropTypes.shape({
    title: PropTypes.string,
    amount: PropTypes.number,
  }),
  history: PropTypes.object,
  centerText: PropTypes.string,
  user: PropTypes.object,
};
