import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import { action } from '@storybook/addon-actions';
import PostsTable, { Table } from './index';

const metricsConfig = [
  {
    apiKey: 'clicks',
    average: 0,
    averageDiff: 0,
    averageLabel: 'Clicks average',
    averageLowerCaseLabel: 'clicks',
    diff: 0,
    key: 'postClicks',
    label: 'Post Clicks',
    lowerCaseLabel: 'post clicks',
    maxValue: 400,
    previousAverage: 0,
    previousValue: 0,
    supportsPeriodTotal: true,
    value: 122,
  },
  {
    apiKey: 'reactions',
    average: 0,
    averageDiff: 0,
    averageLabel: 'Reactions',
    averageLowerCaseLabel: 'reactions',
    diff: 0,
    key: 'reactions',
    label: 'Reactions',
    lowerCaseLabel: 'reactions',
    maxValue: 5000,
    previousAverage: 0,
    previousValue: 0,
    supportsPeriodTotal: true,
    value: 3000,
  },
  {
    apiKey: 'impressions',
    average: 0,
    averageDiff: 0,
    averageLabel: 'Impressions averages',
    averageLowerCaseLabel: 'impressions',
    diff: 0,
    key: 'postImpressions',
    label: 'Post Impressions',
    lowerCaseLabel: 'post impressions',
    maxValue: 253867,
    previousAverage: 0,
    previousValue: 0,
    supportsPeriodTotal: true,
    value: 14997,
  },
  {
    apiKey: 'reach',
    average: 0,
    averageDiff: 0,
    averageLabel: 'Post Reach',
    averageLowerCaseLabel: 'post reach',
    diff: 0,
    key: 'postReach',
    label: 'Post Reach',
    lowerCaseLabel: 'post reach',
    maxValue: 0,
    previousAverage: 0,
    previousValue: 0,
    supportsPeriodTotal: true,
    value: 0,
  },
  {
    apiKey: 'engagement_rate',
    average: 0,
    averageDiff: 0,
    averageLabel: 'Engagement Rate',
    averageLowerCaseLabel: 'engagement rate',
    diff: 0,
    key: 'engagement_rate',
    label: 'Engagement Rate',
    lowerCaseLabel: 'engagement rate',
    maxValue: 100,
    previousAverage: 0,
    previousValue: 0,
    supportsPeriodTotal: true,
    value: 5.6,
  },
];

const config = {
  facebook: {
    postMetrics: metricsConfig,
    sortMetrics: metricsConfig,
  },
  instagram: {
    postMetrics: metricsConfig,
    sortMetrics: metricsConfig,
  },
  twitter: {
    postMetrics: metricsConfig,
    sortMetrics: metricsConfig,
  },
};

const topPosts = [
  {
    date: 1504609289000,
    id: '108311429241313_1678040122268428',
    media: {
      picture:
        'https://buffer-media-uploads.s3.amazonaws.com/59a4711d7cbc83d309960116/5ed19955e0c4785b990ec752ff6df55c367f9808_82f6ee1b0595df873cb2135b669200524d6bd746_facebook',
      thumbnail:
        'https://buffer-media-uploads.s3.amazonaws.com/59a4711d7cbc83d309960116/5ed19955e0c4785b990ec752ff6df55c367f9808_dc779030b683e4f41ffa863f5c88795128de1d58_thumbnail',
    },
    serviceLink: 'https://facebook.com/108311429241313/posts/1678040122268428',
    statistics: {
      clicks: 3067,
      reactions: 2000,
      impressions: 118807,
      reach: 15934,
      engagement_rate: 2,
    },
    text: 'Procaffeinating (n): the tendency to not start anything until you\'ve had a coffee',
    type: 'picture',
    profile: {
      service: 'instagram',
      username: '@lunasneakers'
    },
  },
  {
    date: 1504702860000,
    id: '108311429241313_1678667888872318',
    media: {
      picture:
        'https://buffer-media-uploads.s3.amazonaws.com/59a4711d7cbc83d309960116/5ed19955e0c4785b990ec752ff6df55c367f9808_82f6ee1b0595df873cb2135b669200524d6bd746_facebook',
      thumbnail:
        'https://buffer-media-uploads.s3.amazonaws.com/59a4711d7cbc83d309960116/5ed19955e0c4785b990ec752ff6df55c367f9808_dc779030b683e4f41ffa863f5c88795128de1d58_thumbnail',
    },
    serviceLink: 'https://facebook.com/108311429241313/posts/1678667888872318',
    statistics: {
      clicks: 1666,
      impressions: 23297,
      reach: 8582,
      engagement_rate: 2.5,
    },
    text: '📌 UPDATED for 2017:<br />\nThe official guide to Facebook Video requirements 📹<br />\n<br />\nvia Matt Navarra',
    type: 'picture',
    profile: {
      service: 'instagram',
      username: '@lunasneakers'
    },
  },
  {
    date: 1504868484000,
    id: '108311429241313_1681434551928985',
    serviceLink: 'https://facebook.com/108311429241313/posts/1681434551928985',
    statistics: {
      reactions: 0,
      clicks: 534,
      impressions: 14997,
      reach: 6095,
      engagement_rate: 4.33,
    },
    text: 'Creating social media content takes time... And creating great social media content takes even longer!<br />\n<br />\n19 tools to help take your content to the next level in less time ⏰',
    type: 'link',
    profile: {
      service: 'instagram',
      username: '@lunasneakers'
    },
  },
];

const style = {
  width: '100%',
  minWidth: '920px',
  maxWidth: '1080px',
}

storiesOf('PostsTable')
  .addDecorator(checkA11y)
  .add('should render the posts table', () => (
    <div style={style}>
      <PostsTable
        timezone={'America/Los_Angeles'}
        service={'facebook'}
        config={config}
        metrics={topPosts}
        selectMetric={action('selectMetric')}
        selectedMetric={{
          key: 'impressions',
          label: 'Post Impressions',
        }}
        toggleDropdown={action('toggleDropdown')}
        isDescendingSelected
        handlePostsCountClick={action('handlePostsCountClick')}
        activePostsCount={10}
      />
    </div>
  ))
  .add('should render the posts table with default selected metric', () => (
    <div style={style}>
      <PostsTable
        timezone={'America/Los_Angeles'}
        service={'facebook'}
        config={config}
        metrics={topPosts}
        selectMetric={action('selectMetric')}
        selectedMetric={{}}
        toggleDropdown={action('toggleDropdown')}
        isDescendingSelected
        handlePostsCountClick={action('handlePostsCountClick')}
        activePostsCount={10}
      />
    </div>
  ))
  .add('should render a loading state', () => (
    <div style={style}>
      <PostsTable
        timezone={'America/Los_Angeles'}
        service={'facebook'}
        config={config}
        loading
        metrics={[]}
        selectMetric={action('selectMetric')}
        selectedMetric={{
          key: 'impressions',
          label: 'Post Impressions',
        }}
        toggleDropdown={action('toggleDropdown')}
        isDescendingSelected
        handlePostsCountClick={action('handlePostsCountClick')}
        activePostsCount={10}
      />
    </div>
  ))
  .add('should render a "no data" state', () => (
    <div style={style}>
      <PostsTable
        timezone={'America/Los_Angeles'}
        service={'facebook'}
        config={config}
        metrics={[]}
        selectMetric={action('selectMetric')}
        selectedMetric={{
          key: 'impressions',
          label: 'Post Impressions',
        }}
        toggleDropdown={action('toggleDropdown')}
        isDescendingSelected
        handlePostsCountClick={action('handlePostsCountClick')}
        activePostsCount={10}
      />
    </div>
  ))
  .add('should render a "no data" state with controls if the user is searching by keywords', () => (
    <div style={style}>
      <PostsTable
        timezone={'America/Los_Angeles'}
        service={'facebook'}
        config={config}
        metrics={[]}
        selectMetric={action('selectMetric')}
        selectedMetric={{
          key: 'impressions',
          label: 'Post Impressions',
        }}
        toggleDropdown={action('toggleDropdown')}
        isDescendingSelected
        handlePostsCountClick={action('handlePostsCountClick')}
        activePostsCount={10}
        searchTerms={['a search', 'with no results']}
      />
    </div>
  ))
  .add('should render the posts table for twitter', () => (
    <div style={style}>
      <PostsTable
        timezone={'America/Los_Angeles'}
        service={'twitter'}
        config={config}
        metrics={topPosts}
        selectMetric={action('selectMetric')}
        selectedMetric={{
          key: 'impressions',
          label: 'Post Impressions',
        }}
        toggleDropdown={action('toggleDropdown')}
        isDescendingSelected
        handlePostsCountClick={action('handlePostsCountClick')}
        activePostsCount={10}
      />
    </div>
  ))
  .add('should render the posts table for instagram', () => (
    <div style={style}>
      <PostsTable
        timezone={'America/Los_Angeles'}
        service={'instagram'}
        config={config}
        metrics={topPosts}
        selectMetric={action('selectMetric')}
        selectedMetric={{
          key: 'impressions',
          label: 'Post Impressions',
        }}
        toggleDropdown={action('toggleDropdown')}
        isDescendingSelected
        handlePostsCountClick={action('handlePostsCountClick')}
        activePostsCount={10}
      />
    </div>
  ))
  .add('should render an empty component on hide', () => (
    <div style={style}>
      <PostsTable
        hide
        timezone={'America/Los_Angeles'}
        service={'instagram'}
        config={config}
        metrics={topPosts}
        selectMetric={action('selectMetric')}
        selectedMetric={{
          key: 'impressions',
          label: 'Post Impressions',
        }}
        toggleDropdown={action('toggleDropdown')}
        isDescendingSelected
        handlePostsCountClick={action('handlePostsCountClick')}
        activePostsCount={10}
      />
    </div>
  ))
  .add('should hide posts link on export', () => (
    <div style={style}>
      <PostsTable
        timezone={'America/Los_Angeles'}
        service={'instagram'}
        config={config}
        metrics={topPosts}
        selectMetric={action('selectMetric')}
        selectedMetric={{
          key: 'impressions',
          label: 'Post Impressions',
        }}
        toggleDropdown={action('toggleDropdown')}
        isDescendingSelected
        handlePostsCountClick={action('handlePostsCountClick')}
        activePostsCount={10}
        exporting
      />
    </div>
  ))
  .add('should show search terms on report', () => (
    <div style={style}>
      <Table
        timezone={'America/Los_Angeles'}
        service={'facebook'}
        config={config}
        metrics={topPosts}
        selectMetric={action('selectMetric')}
        selectedMetric={{
          key: 'impressions',
          label: 'Post Impressions',
        }}
        toggleDropdown={action('toggleDropdown')}
        isDescendingSelected
        handlePostsCountClick={action('handlePostsCountClick')}
        forReport
        searchTerms={['#CreativeDrive', 'work for people']}
      />
    </div>
  ));