/**
 * @module  components/MobileHamburgerMenu
 * @author  jedelson
 * @description Navbar component that can be used in any top-level component
 */

// dependencies
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

// components
import Nametag from '../../ui-templates/Nametag/Nametag'

// styles / assets
import { StyledMobileHamburgerMenu, StyledMobilePanel, StyledLink, StyledLogoutLink } from './MobileHamburgerMenu.styled'

// utils
import { isCreator } from '../../../utils/accountTypes'
import { urls } from '../../../utils/enums'
import { invalidateSession } from '../../../actions/accountActions'

const mapStateToProps = (store) => ({
    username: store.account.username,
    profilePhoto: store.account.profilePhoto,
    accountType: store.account.accountType,
    name: store.account.name
})

const mapDispatchToProps = (dispatch) => ({
  handleLogout: () => dispatch(invalidateSession()),
})

const MobileHamburgerMenu = (props) => {
    const { username, profilePhoto, name, handleLogout, accountType } = props
    const [isToggled, setToggle] = useState(false)

    const location = useLocation()
    const history = useHistory()

    const onClick = () => {
      setToggle(!isToggled)
      document.body.style.overflow = "hidden"
    }

    const closeClick = () => {
        setToggle(!isToggled)
        document.body.style.overflow = "auto"
    }

    const logout = () => {
      handleLogout()
      history.push(urls.DISCOVER)
    }

    const menuClick = (url) => {
      history.push(url)
      setToggle(!isToggled)
      document.body.style.overflow = "auto"
    }

  return (
    <StyledMobileHamburgerMenu>
        <div className="hamburger" onClick={onClick}>
            <FontAwesomeIcon icon={['fal', 'bars']} />
        </div>
        <StyledMobilePanel $isToggled={isToggled}>
            <div className="close" onClick={closeClick}>
                <FontAwesomeIcon icon={['fal', 'times']} />
            </div>

            <div className="nametag">
                <Nametag
                    linkTo={isCreator(accountType) ? `${urls.CREATOR_PROFILE}/${username}` : null}
                    profilePhoto={profilePhoto}
                    name={name}
                    photoSize="medium-alt"
                    nameSize="xlarge"
                    nameWeight="bold"
                    direction="column"
                    altText={name}
                />
            </div>

            {isCreator(accountType) && (
              <StyledLink to={isCreator(accountType) ? `${urls.CREATOR_PROFILE}/${username}` : null} $isCurrent={location.pathname === urls.CREATOR_PROFILE}>
                Profile
              </StyledLink>
            )}

            <StyledLink onClick={menuClick(urls.SETTINGS)} $isCurrent={location.pathname === urls.SETTINGS}>
              Settings
            </StyledLink>

            <hr />

            <StyledLink to={urls.CREATOR_PROFILE} $isCurrent={location.pathname === urls.CREATOR_PROFILE}>
              Roadmap
            </StyledLink>

            {isCreator(accountType) && (
              <StyledLink to={urls.CREATOR_PROFILE} $isCurrent={location.pathname === urls.CREATOR_PROFILE}>
                Creator Tips
              </StyledLink>
            )}

            <StyledLink to={urls.CREATOR_PROFILE} $isCurrent={location.pathname === urls.CREATOR_PROFILE}>
              Help Center
            </StyledLink>

            <hr />

            <StyledLogoutLink onClick={logout}>
              Log out
            </StyledLogoutLink>

        </StyledMobilePanel>
        {isToggled && <div className="overlay" onClick={closeClick}></div>}
    </StyledMobileHamburgerMenu>
  )
}

MobileHamburgerMenu.propTypes = {
    username: PropTypes.string.isRequired,
    profilePhoto: PropTypes.string,
    name: PropTypes.string.isRequired,
    handleLogout: PropTypes.func,
  }

  export default connect(mapStateToProps, mapDispatchToProps)(MobileHamburgerMenu)