import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import { ReportsStore } from '@bufferapp/analyze-decorators';
import PostsSummaryTable from './index';

storiesOf('PostsSummaryTable')
  .addDecorator(checkA11y)
  .addDecorator(ReportsStore)
  .add('should render the posts summary table', () => (
    <div
      style={{
        width: '750px',
      }}
    >
      <PostsSummaryTable
        metrics={[
          {
            label: 'Posts',
            value: 20,
            diff: 5,
          },
          {
            label: 'Post Impressions',
            value: 901,
            diff: -39,
          },
          {
            label: 'Post Reach',
            value: 1010,
            diff: 55,
          },
          {
            label: 'Reactions',
            value: 568,
            diff: -26,
          },
          {
            label: 'Comments',
            value: 1,
            diff: 0,
          },
          {
            label: 'Shares',
            value: 12,
            diff: -1,
          },
        ]}
        profileService="facebook"
      />
    </div>
  ))
  .add('should render the posts summary table with the percentage bar for paid metrics', () => (
    <div
      style={{
        width: '750px',
      }}
    >
      <PostsSummaryTable
        metrics={[
          {
            label: 'Posts',
            value: 15,
            diff: 5,
            paid: 5
          },
          {
            label: 'Impressions',
            value: 500,
            diff: -39,
            paid: 401
          },
          {
            label: 'Reach',
            value: 300,
            diff: 55,
            paid: 710
          },
          {
            label: 'Likes',
            value: 200,
            diff: -26,
            paid: 368
          },
          {
            label: 'Comments',
            value: 1,
            diff: 0,
            paid: 0
          },
          {
            label: 'Engagement Rate',
            value: 4.09,
            diff: -1.02,
            paid: 0
          },
        ]}
        profileService="instagram"
      />
    </div>
  ))
  .add('should render a loading state', () => (
    <div
      style={{
        width: '750px',
      }}
    >
      <PostsSummaryTable profileService="facebook" loading metrics={[]} />
    </div>
  ))
  .add('should render a "no data" state', () => (
    <div
      style={{
        width: '750px',
      }}
    >
      <PostsSummaryTable profileService="twitter" metrics={[]} />
    </div>
  ));