import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import {
  ChartStateNoData as NoData,
  ChartStateLoading as Loading,
  ChartCard,
  ChartHeader,
  GridItem,
  Helper,
  Container
} from '@bufferapp/analyze-shared-components';

import AddReport from '@bufferapp/add-report';

import Title from '../Title';
import { LockIfNotAllowed, STORIES } from '@bufferapp/analyze-account';

const Grid = styled.ul`
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto;
`;

export const Table = ({ metrics }) =>
  <Grid>
    {metrics.map((metric, index) => {
      const itemProps = {
        key: metric.label,
        metric,
        gridWidth: '33.33%',
        showPercentSign: metric.label === 'Engagement Rate',
      };
      if (metrics.length === 5) itemProps.gridWidth = '20%';
      return (<GridItem {...itemProps} inline={index > 2}/>);
    })}
  </Grid>;

Table.propTypes = {
  metrics: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.number,
    diff: PropTypes.number,
  })).isRequired,
};

const StoriesSummaryTable = ({ metrics, loading }) => {
  let content = null;
  if (loading) {
    content = <Loading active noBorder />;
  } else if (metrics.length === 0) {
    content = <NoData chartName="stories-summary" />;
  } else {
    content = <Table metrics={metrics} />;
  }

  return (
    <ChartCard>
      <LockIfNotAllowed {...{ STORIES }}>
        <ChartHeader>
          <Helper label='instagram disclaimer'>
            <Title />
          </Helper>
          <AddReport chart="stories-summary" />
        </ChartHeader>
        <Container id="js-dom-to-png-stories-summary">
          {content}
        </Container>
      </LockIfNotAllowed>
    </ChartCard>
  );
};

StoriesSummaryTable.defaultProps = {
  loading: false,
};

StoriesSummaryTable.propTypes = {
  loading: PropTypes.bool,
  metrics: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.number,
    diff: PropTypes.number,
  })).isRequired,
};

export default StoriesSummaryTable;