import React from 'react'

import TooltipHeadline from './TooltipHeadline'
import FooterSummary from './FooterSummary'
import { type ChartTooltipProps } from './ChartTooltipTypes'
import TooltipBodyContent from './TooltipBodyContent'
import styles from './_charts-tooltip.module.scss'
import { useMediaQuery } from '../../../hooks/responsiveHooks'
import Events from './Events'

const ChartTooltip = ({
  header,
  tooltipContent,
  footer,
  events,
  qaTestId = 'chart-tooltip',
}: ChartTooltipProps): React.JSX.Element => {
  const isMobileView = useMediaQuery({ type: 'max', breakpoint: 'md' })
  return (
    <div
      className={
        events
          ? !isMobileView
            ? styles.tooltipContainer
            : styles.tooltipMobileContainer
          : undefined
      }
      qa-test-id={qaTestId}
    >
      <div className={styles.chartTooltipContainer}>
        <TooltipHeadline {...header} />
        <TooltipBodyContent {...tooltipContent} />
        {footer ? <FooterSummary summary={footer} /> : null}
      </div>

      {events ? (
        <>
          <div
            className={
              isMobileView ? styles.horizontalDivider : styles.verticalDivider
            }
          />
          <div className={styles.eventsSectionContainer}>
            <TooltipHeadline text={events.eventTooltipHeader} />
            <Events {...events} />
          </div>
        </>
      ) : null}
    </div>
  )
}

export default ChartTooltip