import React from 'react';
import styled from 'styled-components';
import dayjs from 'dayjs';
import numeral from 'numeral';
import Thumbnail from './Thumbnail';
import Metric from '../Summary/Metric';
import ClockIcon from '@bufferapp/ui/Icon/Icons/Clock';
import { grayLight } from '@bufferapp/ui/style/colors';
import { Text } from '@bufferapp/components';

const Stat = styled.li`
  list-style: none;

  display: flex;
  align-items: center;

  svg {
    margin-right: 5px;
    height: 12px;
    width: 12px;
  }
`;

const Stats = styled.ul`
  background: white;
  padding: 1.25rem 1rem;
  margin: 0;
  
  > ${Stat}:not(:last-child) {
    margin-bottom: 1rem;
  }
`;

const Story = styled.div`
  flex: 1 20%;
  width: 20%;
  box-sizing: border-box;
  width: ${props => props.width}px;
  padding: 0 0.75rem 0 0;
`;

const Filler = styled(Story)`
  background: linear-gradient(180deg, #EDEDED 0%, rgba(0, 0, 0, 0) 100%);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 3px;
`;

const Box = styled.div`
  border-radius: 3px;
  border: 1px solid #ededed;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
`;


export default ({ filler, thumbnail, date, type, reach, completionRate, page, width, serviceId }) => {
  return (filler
  ? <Story width={width}>
      <Filler />
    </Story>
  : <Story width={width}>
      <Box>
        <Thumbnail src={thumbnail} type={type} timestamp={date} serviceId={serviceId} />
        <Stats>
          <Stat>
            <Metric
              label="Reach"
              name="reach"
              value={numeral(reach).format('0,0')}
              small
            />
          </Stat>
          <Stat>
            <Metric
              label="Completion Rate"
              name="completionRate"
              value={`${numeral(completionRate * 100).format('0.00')}%`}
              small
            />
          </Stat>
          <Stat>
            <ClockIcon color={grayLight} />
            <Text color="outerSpaceLight" weight="bold" size="small">
              {dayjs(date * 1000).format('MMM D[,] hh:mm')}
            </Text>
          </Stat>
        </Stats>
      </Box>
    </Story>
  );
}