import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import { action } from '@storybook/addon-actions';
import { ReportsStore } from '@bufferapp/analyze-decorators';
import dayjs from 'dayjs';
import StoriesBreakdown from './index';
import { ALL_DAYS } from '../../reducer';

dayjs.tz.setDefault('America/Los_Angeles');

const stories = [{
  thumbnail: 'https://source.unsplash.com/random/166x295',
  date: 1547475789000,
  reach: 9428,
  completionRate: 0.954,
}, {
  thumbnail: 'https://source.unsplash.com/random/166x295?q=2',
  date: 1547475789000,
  reach: 8235,
  completionRate: 0.94,
}, {
  thumbnail: 'https://source.unsplash.com/random/166x295?q=3',
  date: 1547475789000,
  reach: 8234,
  completionRate: 0.935,
  type: 'video',
}, {
  thumbnail: 'https://source.unsplash.com/random/166x295?q=4',
  date: 1547475789000,
  reach: 6421,
  completionRate: 0.961,
}];

const summary = {
  impressions: 153574,
  reach: 84246,
  completionRate: 94.6,
  exits: 2436,
};

const style = {
  width: '100%',
  mixWidth: '920px',
  maxWidth: '1024px',
}

storiesOf('StoriesBreakdown')
  .addDecorator(checkA11y)
  .addDecorator(ReportsStore)
  .add('broken image with fallback', () => (
    <div style={style}>
      <StoriesBreakdown
        stories={[{
          thumbnail: 'https://sourceunsplash.com/random/166x295?q=3',
          date: 1597309216,
          reach: 8234,
          completionRate: 0.935,
          type: 'video',
        }]}
        serviceId={'17841417623145140'}
        summary={summary}
        startDate={dayjs().subtract(7, 'days').valueOf()}
        endDate={dayjs().subtract(1, 'day').valueOf()}
        filterBy={action('select day')}
        sortBy={action('sort by')}
        attributeToSortBy="date"
        selectedDay={ALL_DAYS}
      />
    </div>
  ))
  .add('without pagination', () => (
    <div style={style}>
      <StoriesBreakdown
        stories={stories}
        summary={summary}
        startDate={dayjs().subtract(7, 'days').valueOf()}
        endDate={dayjs().subtract(1, 'day').valueOf()}
        filterBy={action('select day')}
        sortBy={action('sort by')}
        attributeToSortBy="date"
        selectedDay={ALL_DAYS}
      />
    </div>
  ))
  .add('with pagination', () => (
    <div style={style}>
      <StoriesBreakdown
        stories={[...stories, ...stories, ...stories]}
        summary={summary}
        startDate={dayjs().subtract(7, 'days').valueOf()}
        endDate={dayjs().subtract(1, 'day').valueOf()}
        filterBy={action('select day')}
        sortBy={action('sort by')}
        attributeToSortBy="date"
        selectedDay={ALL_DAYS}
      />
    </div>
  ))
  .add('loading state', () => (
    <div style={style}>
      <StoriesBreakdown loading />
    </div>
  ));