import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import PostsHeader from './index';

const mockMetrics = [
  {
    key: 'impressions',
    label: 'Post Impressions',
  },
  {
    key: 'reach',
    label: 'Post Reach',
  },
  {
    key: 'clicks',
    label: 'Post Clicks',
  },
  {
    key: 'reactions',
    label: 'Reactions',
  },
  {
    key: 'comments',
    label: 'Comments',
  },
  {
    key: 'shares',
    label: 'Shares',
  },
];


storiesOf('PostsHeader')
  .addDecorator(checkA11y)
  .add('should render top posts header', () => (
    <div>
      <PostsHeader
        metrics={mockMetrics}
        selectedMetric={mockMetrics[3]}
        isDescendingSelected
        handlePostsCountClick={() => {}}
        handlePostsSortClick={() => {}}
        activePostsCount={10}
        isDropdownOpen={false}
        selectMetric={() => {}}
        toggleDropdown={() => {}}
      />
    </div>
  ))
  .add('should render top posts header ascending selected', () => (
    <div>
      <PostsHeader
        metrics={mockMetrics}
        selectedMetric={mockMetrics[3]}
        handlePostsCountClick={() => {}}
        handlePostsSortClick={() => {}}
        activePostsCount={10}
        isDropdownOpen={false}
        selectMetric={() => {}}
        toggleDropdown={() => {}}
      />
    </div>
  ));