import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
import Icon from '../icon'
import T from '../t'
import Tooltip from '../tooltip'
import { cs } from '../utils'
import { LabelProps } from './label.types'

export const LabelBase = styled.labelBox`
  display: block;
  color: darkBlue.main;
  font-weight: 600;
  width: 100%;

  &[aria-disabled='true'] {
    color: sandstone.75;
    cursor: not-allowed;
  }
`

/** Displays a paragraph of text. */
export const Label = vui<'label', LabelProps>((props, ref) => {
  const { children, className, markAsOptional, tooltipText, text, fontSize, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('Label', props)

  const isOnlyText = text && !markAsOptional && !tooltipText && !children

  return (
    <T as={LabelBase} className={cs('vui-label', className)} fontSize={fontSize} ref={ref} {...rest}>
      {children ??
        (isOnlyText ? (
          text
        ) : (
          <>
            <T fontSize={fontSize}>{text}</T>
            {!!markAsOptional && (
              <T fontSize={fontSize} {...styles.helper}>
                (optional)
              </T>
            )}
            {!!tooltipText && (
              <T fontSize={fontSize} {...styles.helper}>
                <Tooltip text={tooltipText}>
                  <Icon mb={fontSize === 'xs' ? '-6px' : '-5px'} name="falInfoCircle" role="button" size="sm" />
                </Tooltip>
              </T>
            )}
          </>
        ))}
    </T>
  )
})

Label.displayName = 'Label'
export default Label
