import React from 'react'
import PropTypes from 'prop-types'
import { NavLink } from 'react-router-dom'
import Isvg from 'react-inlinesvg'

import walletIcon from 'icons/wallet_2.svg'
import peersIcon from 'icons/contacts.svg'
import networkIcon from 'icons/network.svg'
import helpIcon from 'icons/help_2.svg'

import styles from './Nav.scss'

const Nav = ({ openPayForm, openRequestForm }) => (
  <nav className={styles.nav}>
    <header className={styles.header}>
      <h1>zap</h1>
      <span>beta</span>
    </header>
    <ul className={styles.links}>
      <NavLink exact to='/' activeClassName={styles.active} className={styles.link}>
        <li>
          <Isvg styles={{ verticalAlign: 'middle' }} src={walletIcon} />
          <span>Wallet</span>
        </li>
      </NavLink>
      <NavLink exact to='/contacts' activeClassName={styles.active} className={styles.link}>
        <li>
          <Isvg styles={{ verticalAlign: 'middle' }} src={peersIcon} />
          <span>Contacts</span>
        </li>
      </NavLink>
      <NavLink exact to='/network' activeClassName={styles.active} className={styles.link}>
        <li>
          <Isvg styles={{ verticalAlign: 'middle' }} src={networkIcon} />
          <span>Network</span>
        </li>
      </NavLink>
      <NavLink exact to='/help' activeClassName={styles.active} className={styles.link}>
        <li>
          <Isvg styles={{ verticalAlign: 'middle' }} src={helpIcon} />
          <span>Help</span>
        </li>
      </NavLink>
    </ul>
    <div className={styles.buttons}>
      <div className={`buttonPrimary ${styles.button}`} onClick={openPayForm}>
        <span>Pay</span>
      </div>
      <div className={`buttonPrimary ${styles.button}`} onClick={openRequestForm}>
        <span>Request</span>
      </div>
    </div>
  </nav>
)

Nav.propTypes = {
  openPayForm: PropTypes.func.isRequired,
  openRequestForm: PropTypes.func.isRequired
}

export default Nav