import React from 'react'

import styles from './_charts-tooltip.module.scss'
import { type EventsProps } from './ChartTooltipTypes'
import Button from '../../Button/Button'
import { c } from '../../../translations/LibraryTranslationService'
import { useMediaQuery } from '../../../hooks/responsiveHooks'

const Events: React.FC<EventsProps> = (events) => {
  const isMobileView = useMediaQuery({ type: 'max', breakpoint: 'md' })
  const eventsArray = events?.events.slice(0, 4).map((event) => event)
  return (
    <div>
      {(isMobileView ? events.events : eventsArray).map((event, index) => (
        <div key={index} className={styles.event}>
          <div
            className={styles.diamond}
            style={{ backgroundColor: event.color }}
          ></div>
          <div className={styles.eventText}>
            <div className={styles.eventHeader}>{event.eventHeader}</div>
            {event.eventSubHeader ? (
              <div className={styles.eventSubHeader}>
                {event.eventSubHeader}
              </div>
            ) : null}
            <div className={styles.eventDateContainer}>{event.eventDate}</div>
            {event.eventDescription ? (
              <div className={styles.eventDescriptionContainer}>
                {event.eventDescription}
              </div>
            ) : null}
          </div>
        </div>
      ))}
      <div className={styles.eventButtonContainer}>
        {events.events.length > 4 && !isMobileView ? (
          <Button
            as='button'
            styleType='text-blue'
            onClick={() => {
              events.callout()
            }}
          >
            {c('countMore', { count: events.events.length - 4 })}
          </Button>
        ) : null}
      </div>
    </div>
  )
}
export default Events