import React, { useContext } from 'react'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { translate } from 'cozy-ui/react/I18n'
import { NavLink } from 'react-router-dom'
import Icon from 'cozy-ui/react/Icon'

import ConsoIconOff from 'assets/icons/tabbar/conso/off.svg'
import ChallengeIconOn from 'assets/icons/tabbar/defi/on.svg'
import ChallengeIconOff from 'assets/icons/tabbar/defi/off.svg'
import ChallengeIconOffNotif from 'assets/icons/tabbar/defi/off-notif.svg'
import ParameterIconOff from 'assets/icons/tabbar/parametre/off.svg'
import ConsoIconOn from 'assets/icons/tabbar/conso/on.svg'
import ParameterIconOn from 'assets/icons/tabbar/parametre/on.svg'

interface NavbarProps {
  t: Function
}

export const Navbar = ({ t }: NavbarProps) => {
  const { challengeNotification } = useContext(AppContext)
  return (
    <aside className="o-sidebar">
      <nav>
        <ul className="c-nav">
          <li className="c-nav-item">
            <NavLink
              to="/consumption"
              className="c-nav-link"
              activeClassName="is-active"
            >
              <Icon className="c-nav-icon off" icon={ConsoIconOff} />
              <Icon className="c-nav-icon on" icon={ConsoIconOn} />
              {t('Nav.consumption')}
            </NavLink>
          </li>
          <li className="c-nav-item">
            <NavLink
              to="/challenges"
              className="c-nav-link"
              activeClassName="is-active"
            >
              {challengeNotification && (
                <div className="nb-challenge-notif">1</div>
              )}
              <Icon className="c-nav-icon off" icon={ChallengeIconOff} />
              <Icon className="c-nav-icon on" icon={ChallengeIconOn} />
              {t('Nav.challenges')}
            </NavLink>
          </li>

          <li className="c-nav-item">
            <NavLink
              to="/parameters"
              className="c-nav-link"
              activeClassName="is-active"
            >
              <Icon className="c-nav-icon off" icon={ParameterIconOff} />
              <Icon className="c-nav-icon on" icon={ParameterIconOn} />
              {t('Nav.parameters')}
            </NavLink>
          </li>
        </ul>
      </nav>
    </aside>
  )
}

// translate() provide t() to use translations (ex: locales/en.json)
export default translate()(Navbar)