import React from 'react';
import styled from 'styled-components';
import numeral from 'numeral';
import Metric from './Metric';
import { PropTypes } from 'prop-types';
import Stories from '../../Stories';

const Footer = styled.footer`
  display: flex;
  align-items: center;
  padding: 0 ${props => props.forReport ? '0' : '16px'} 24px;
`;

const Summary = ({ stories, forReport }) => {
  const { impressions, reach, completionRate, exits } = Stories.summary(stories);
  return (
    <Footer forReport={forReport}>
      <Metric name="impressions" label="Impressions" value={numeral(impressions).format('0,0')} />
      <Metric name="reach" label="Average Reach" value={numeral(reach).format('0,0')} />
      <Metric name="completionRate" label="Completion Rate" value={`${numeral(completionRate).format('0.00')}%`} />
      <Metric name="exits" label="Exits" value={numeral(exits).format('0,0')} />
    </Footer>
  );
}

Summary.propTypes = {
  impressions: PropTypes.number.isRequired,
  reach: PropTypes.number.isRequired,
  completionRate: PropTypes.number.isRequired,
  exits: PropTypes.number.isRequired,
};

export default Summary;