import React from 'react'
import useTheme from '../use-theme'
import FooterFoot from './footer-foot'
import FooterGroup from './footer-group'
import FooterLink from './footer-link'
import { pickChild } from '../utils/collections'

interface Props {
  className?: string
}

const defaultProps = {
  className: ''
}

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

const Footer: React.FC<React.PropsWithChildren<FooterProps>> = ({
  children,
  className,
  ...props
}) => {
  const theme = useTheme()

  const [withoutFooterChildren, footerChildren] = pickChild(children, FooterFoot)

  return (
    <footer className={className} {...props}>
      <nav className="container" aria-label="AX Directory" role="navigation">
        {withoutFooterChildren}
      </nav>
      {footerChildren}

      <style jsx>{`
        footer {
          box-sizing: border-box;
          background-color: ${theme.palette.background};
          position: relative;
          width: 100%;
          min-height: 100vh;
        }

        nav {
          border-top: 1px solid ${theme.palette.border};
          max-width: ${theme.layout.pageWidthWithMargin};
          padding: ${theme.layout.gap};
          margin: 0 auto;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: stretch;
        }

        @media (min-width: ${theme.layout.breakpointMobile}) {
          footer {
            min-height: initial;
          }

          nav {
            padding-bottom: ${theme.layout.gap};
            padding-top: 56px;
          }
        }
      `}</style>
    </footer>
  )
}

type MemoPageComponent<P> = React.NamedExoticComponent<P> & {
  Group: typeof FooterGroup
  Foot: typeof FooterFoot
  Link: typeof FooterLink
}
type ComponentProps = Partial<typeof defaultProps> &
  Omit<Props, keyof typeof defaultProps> &
  NativeAttrs

Footer.defaultProps = defaultProps

export default React.memo(Footer) as MemoPageComponent<ComponentProps>