import * as React from 'react'
import classNames from 'classnames'

/**
 * @TODO make a parent component for monitors sticky state
 * at some point, NavigationSticky may needed to know whether it is sticky or not
 */

type Props = Readonly<{
  children: (props: any) => any
  height?: number | null
  isBottomVerticalPosition?: boolean
  name: string
  offsetTopPosition?: number
}>

type NavigationStickyStyles = {
  top: string
  height: string
}

/**
 * NavigationSticky
 * @param props
 * a skeleton component provides logic to create a designed NavigationSticky component
 */
export const NavigationSticky = (props: Props) => {
  const {
    children,
    isBottomVerticalPosition = false,
    height = null,
    name,
    offsetTopPosition = 0,
  } = props

  const navigationStickyName = `ui-nav-sticky--${name}`

  const classnames = classNames(
    'ui-nav-sticky ui-position--fill ui-position--sticky',
    {
      [navigationStickyName]: true,
    }
  )

  const styles: NavigationStickyStyles = {
    top: !isBottomVerticalPosition
      ? `${offsetTopPosition}px`
      : `calc(100vh - ${height}px)`,
    height: height ? `${height}px` : '',
  }

  return (
    <>
      <nav className={classnames} data-testid={name} id={name} style={styles}>
        {children(props)}
      </nav>
    </>
  )
}