import React from 'react'
import useTheme from '../use-theme'
import withDefaults from '../utils/with-defaults'

type Props = {
  toggled?: boolean
  className?: string
}

const defaultProps = {
  toggled: false,
  className: ''
}

const StyledBurger: React.FC<
  React.PropsWithChildren<{
    onClick?: React.MouseEventHandler<HTMLElement>
  }>
> = ({ children, onClick }) => {
  return (
    <div className="burger" onClick={onClick}>
      {children}
      <style jsx>{`
        .burger {
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
      `}</style>
    </div>
  )
}

const Lines: React.FC<React.PropsWithChildren<{ toggled?: boolean }>> = ({ children, toggled }) => {
  const theme = useTheme()
  return (
    <div className="lines">
      {children}
      <style jsx>{`
        .lines {
          width: 24px;
          height: 24px;
          background: transparent;
          position: absolute;
          transition: 0.5s;
          ${toggled &&
          `
            background: rgba(0, 0, 0, 0);
            box-shadow: none;
          `}
        }

        .lines:before {
          top: 7px;
          ${toggled &&
          `
              top: 11px;
              transform: rotate(45deg);
          `}
        }

        .lines:after {
          top: 16px;
          ${toggled &&
          `
              top: 11px;
              transform: rotate(135deg);
          `}
        }

        .lines:before,
        .lines:after {
          content: '';
          position: absolute;
          width: 24px;
          height: 2px;
          background: #454545;
          border-radius: 4px;
          transition: 0.4s;
        }

        @media (min-width: ${theme.layout.breakpointMobile}) {
          .lines {
            display: none;
          }
        }
      `}</style>
    </div>
  )
}

type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type BurgerProps = Props & typeof defaultProps & NativeAttrs

const Burger: React.FC<React.PropsWithChildren<BurgerProps>> = ({ toggled, ...props }) => (
  <StyledBurger color="text.primary" {...props}>
    <Lines toggled={toggled} />
  </StyledBurger>
)

export default withDefaults(Burger, defaultProps)