import * as React from 'react'
import * as PropTypes from 'prop-types'
import styled from 'styled-components'
import { Icon } from '../../../../react-common/src'
import MenuGraphics, { propTypes as menuGraphicsPropTypes } from '../MenuGraphics/MenuGraphics'
import { useRouter } from 'next/router'

const Link = styled('a')({
  display: 'block',
  height: 'var(--size-link, 4rem)',
  textDecoration: 'none',
  position: 'relative',
  '::before': {
    display: 'block',
    content: "''",
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'currentColor',
    opacity: 0,
    zIndex: -1,
  },
  '::after': {
    display: 'block',
    content: "''",
    position: 'absolute',
    top: 0,
    left: 0,
    width: '0.25rem',
    height: '100%',
    backgroundColor: 'currentColor',
    opacity: 0,
    zIndex: -1,
  },
  ':hover::before': {
    opacity: 0.25,
  },
  ':hover::after': {
    opacity: 0.5,
  },
})

const ActiveLink = styled(Link)({
  '::before': {
    opacity: 0.25,
  },
  '::after': {
    opacity: 0.5,
  },
})

const LinkText = styled('span')({
  alignSelf: 'center',
  display: 'block',
  lineHeight: 1.25,
  gridColumnStart: 2,
  ':first-child': {
    gridColumnStart: 1,
  },
  ':last-child': {
    gridColumnEnd: 4,
  },
})

const LinkTitle = styled('strong')({
  display: 'block',
})

const LinkSubtitle = styled('span')({
  display: 'block',
})

const IndicatorContainer = styled('span')({
  alignSelf: 'center',
  lineHeight: 0,
})

const MenuGraphicsContainer = styled('span')({
  display: 'block',
  padding: '0.5rem',
  lineHeight: 0,
})

export const basePropTypes = {
  as: PropTypes.string,
  href: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string,
  graphics: PropTypes.shape(menuGraphicsPropTypes),
  indicator: PropTypes.string,
  onClick: PropTypes.func,
}

const propTypes = {
  ...basePropTypes,
  enclosingComponent: PropTypes.elementType,
  as: PropTypes.elementType,
}

type Props = PropTypes.InferProps<typeof propTypes>

const NavLink = React.forwardRef<HTMLAnchorElement, Props>((
  {
    enclosingComponent: EnclosingComponent = React.Fragment,
    href,
    title,
    graphics,
    subtitle,
    indicator,
    onClick,
  },
  ref
) => {
  const router = useRouter()
  const active = router.basePath + router.route === href
  const Component = active ? ActiveLink : Link
  return (
    <Component
      ref={ref}
      href={href}
      onClick={onClick as (...args: any[]) => any}
    >
      {
        // @ts-ignore
        <EnclosingComponent>
          {
            graphics as object
            && (
              <MenuGraphicsContainer>
                {
                  // @ts-ignore
                  <MenuGraphics
                    {...graphics}
                  />
                }
              </MenuGraphicsContainer>
            )
          }
          <LinkText>
            <LinkTitle>
              {title}
            </LinkTitle>
            {
              subtitle as string
              && (
                <LinkSubtitle>
                  {subtitle}
                </LinkSubtitle>
              )
            }
          </LinkText>
          {
            indicator as string
            && (
              <IndicatorContainer>
                <Icon
                  name={indicator!}
                />
              </IndicatorContainer>
            )
          }
        </EnclosingComponent>
      }
    </Component>
  )
})

NavLink.propTypes = propTypes

export default NavLink
