import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { TruncatedNumber, Helper } from '../../../index';
import Text from '@bufferapp/components/Text';
import PercentageBar from '../../../PercentageBar';

const Container = styled.div`
  flex: 1;
  padding: 0 0.5rem 0 0;
`;

const PercentageBarContainer = styled.div`
  width: 75%;
  padding-top: 6px;
`;

const MetricGraph = ({ metric }) => {
  const { value, key, label } = metric;
  const paid = metric.paid ? metric.paid : 0;

  return (
    <Container key={key}>
      <div style={{ marginBottom: 5 }}>
        <Helper label={label}>
          <Text size="mini">{label}</Text>
        </Helper>
      </div>
      <div>
        <Text size="mediun" weight="bold" color="outerSpace">
          <TruncatedNumber showPercentSign={key === 'engagement_rate'}>
            {value + paid}
          </TruncatedNumber>
        </Text>
        {paid > 0 && <PercentageBarContainer><PercentageBar organic={value} paid={paid} /></PercentageBarContainer>}
      </div>
    </Container>
  );
};

MetricGraph.propTypes = {
  metric: PropTypes.shape({
    maxValue: PropTypes.number,
    value: PropTypes.number,
    paid: PropTypes.number,
    color: PropTypes.String,
    key: PropTypes.String,
    label: PropTypes.String,
  }).isRequired,
};

export default MetricGraph;