import { useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { differenceInMinutes } from 'date-fns';
import PageHeader from 'components/layout/PageHeader';
import ActiveUsers from './ActiveUsers';
import MetricCard from './MetricCard';
import styles from './RealtimeHeader.module.css';

export default function RealtimeHeader({ data, websiteId }) {
  const { pageviews, sessions, events, countries } = data;

  const count = useMemo(() => {
    return sessions.filter(
      ({ createdAt }) => differenceInMinutes(new Date(), new Date(createdAt)) <= 5,
    ).length;
  }, [sessions, websiteId]);

  return (
    <>
      <PageHeader>
        <div>
          <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
        </div>
        <div>
          <ActiveUsers className={styles.active} value={count} />
        </div>
      </PageHeader>
      <div className={styles.metrics}>
        <MetricCard
          label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
          value={pageviews.length}
          hideComparison
        />
        <MetricCard
          label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
          value={sessions.length}
          hideComparison
        />
        <MetricCard
          label={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
          value={events.length}
          hideComparison
        />
        <MetricCard
          label={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
          value={countries.length}
          hideComparison
        />
      </div>
    </>
  );
}