import React from 'react'

import Badge, { type BadgeProps } from '../Badge/Badge'
import Icon from '../Icons/Icon'
import Tooltip from '../Tooltip/Tooltip'
import { type TooltipProps } from '../Tooltip/Tooltip'
import styles from './_unsorted-column.module.scss'
import { createTwoLineLabel } from '../../services/tableHelperFunctions'
import Tag, { type TagProps } from '../Tag/Tag'

type UnsortedColumnTooltipProps = {
  /** Define the tooltip content */
  content: TooltipProps['tooltipContent']
  /** Position for the tooltip */
  position?: TooltipProps['position']
  /** Max width for the tooltip */
  maxWidth?: TooltipProps['maxWidth']
}

type UnsortedColumnProps = {
  /** Unique label for the unsorted column headers. */
  label: string
  /** Define the tooltip for a column. */
  tooltip?: UnsortedColumnTooltipProps
  /** Class name for a column. */
  className?: string
  /** This prop will provide extra space for the column when the `showStickyClasses` boolean is `true` in our tables. */
  extraSpaceWhenStickyColumn?: boolean
  /** Optional boolean to add beta tag to header */
  beta?: boolean
  /** Optional badge props to render a badge. If provided, badgeProps takes precedence over beta. */
  badgeProps?: BadgeProps
  /** Optional tag props to render a tag. If provided, tagProps takes precedence over badgeProps. */
  tagProps?: TagProps
  /** Optional boolean to split the label into two lines */
  twoLineLabel?: boolean
}

const UnsortedColumn = ({
  label,
  tooltip,
  className = '',
  extraSpaceWhenStickyColumn,
  beta,
  badgeProps,
  tagProps,
  twoLineLabel,
}: UnsortedColumnProps): React.JSX.Element => {
  return (
    <span
      className={`${styles.unsortColumnContainer} ${className} ${
        extraSpaceWhenStickyColumn ? styles.extraSpace : ''
      }`}
    >
      {createTwoLineLabel(label, twoLineLabel)}
      {tagProps ? (
        <Tag {...tagProps} />
      ) : badgeProps ? (
        <Badge {...badgeProps} />
      ) : beta ? (
        <Badge children='Beta' color='lavender' />
      ) : null}
      {tooltip ? (
        <Tooltip
          tooltipContent={tooltip.content}
          position={tooltip.position ? tooltip.position : 'bottom'}
          maxWidth={tooltip.maxWidth}
        >
          <Icon icon='info' color='dark-blue' iconSize='12px' />
        </Tooltip>
      ) : null}
    </span>
  )
}

export default UnsortedColumn