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

const postWithMedia =  {
    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: {
      post_clicks: 1666,
      post_impressions: 23297,
      post_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: 'video',
};

const postWithoutMedia = {
  date: 1504868484000,
  id: '108311429241313_1681434551928985',
  serviceLink: 'https://facebook.com/108311429241313/posts/1681434551928985',
  statistics: {
    post_clicks: 534,
    post_impressions: 14997,
    post_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',
};

const style = {
  width: '200px',
  height: '200px',
}

storiesOf('PostMedia')
  .addDecorator(checkA11y)
  .add('should render post media with attachment', () => (
    <div style={style}>
      <PostMedia
        post={postWithMedia}
      />
    </div>
  ))
  .add('should render post media with just text', () => (
    <div style={style}>
      <PostMedia
        post={postWithoutMedia}
      />
    </div>
  ));