import React from 'react'

import { ButtonProps, IconButton } from '../button'
import { useStyleConfig, vui } from '../core'
import Icon from '../icon'
import { cs, mergeRefs } from '../utils'
import { useHeaderContext } from './context'

/** Button that toggles display of the mobile content. */
export const HeaderMobileToggle = vui<'button', ButtonProps>((props, ref) => {
  const { className, ...rest } = props
  const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = useHeaderContext() ?? {}
  const styles = useStyleConfig('Header', useHeaderContext())

  const iconName = isMobileOpen ? 'falTimes' : 'falBars'

  return (
    <IconButton
      className={cs('vui-headerMobileToggle', className)}
      icon={<Icon name={iconName} />}
      ml={1}
      onClick={() => setIsMobileOpen(s => !s)}
      p="3px"
      ref={mergeRefs(ref, mobileToggleRef)}
      title="More options"
      {...styles.mobileToggle}
      {...rest}
    />
  )
})

HeaderMobileToggle.displayName = 'HeaderMobileToggle'

export default HeaderMobileToggle
