import { omitThemingProps, styled, useStyleConfig, useUp, vui } from '../core'
import { cs, filterUndefined } from '../utils'
import { HeadingProps } from './heading.types'

export const HeadingBase = styled.h2Box`
  font-weight: demi;
  transition-duration: fast;
`

/** Used to define headings and titles for pages, articles, panels, etc. */
export const Heading = vui<'h2', HeadingProps>((props, ref) => {
  const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('Heading', props)

  const { fontSize, lineHeight, ...restStyles } = styles

  const hClassName = props.size ? `vui-${props.size}` : ''

  const aliasedProps = filterUndefined({
    fontWeight: weight,
    textAlign: align,
    textDecoration: decoration,
    textTransform: casing,
  })

  const isDesktop = useUp(993)

  const fontSizeDesktop = fontSize?.desktop || fontSize
  const fontSizeMobile = fontSize?.mobile || fontSize
  const lineHeightDesktop = lineHeight?.desktop || lineHeight
  const lineHeightMobile = lineHeight?.mobile || lineHeight

  return (
    <HeadingBase
      className={cs('vui-heading', hClassName, className)}
      fontSize={isDesktop ? fontSizeDesktop : fontSizeMobile}
      lineHeight={isDesktop ? lineHeightDesktop : lineHeightMobile}
      ref={ref}
      {...restStyles}
      {...aliasedProps}
      {...rest}
    >
      {children ?? text}
    </HeadingBase>
  )
})

Heading.displayName = 'Heading'
export default Heading
