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

const config = [
  {
    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,
  },
];

function onViewPost() {
  console.log(post);
}

const post = {
  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: {
    postClicks: 122,
    postImpressions: 123333,
    postReach: 12122,
    reactions: 123,
    engagement_rate: 5.6,
  },
  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mauris justo, auctor ac odio non, lacinia eleifend lorem. Nunc est eros, commodo ac ex vel, imperdiet rutrum massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sapien quam, iaculis at scelerisque a, volutpat nec metus. Suspendisse augue tellus, feugiat quis posuere in, volutpat sit amet orci. Quisque lacus nisl, ornare lacinia risus at, pellentesque ullamcorper turpis. Curabitur ut fermentum turpis. Aenean luctus porta ipsum, nec mollis erat. Aliquam condimentum orci ex, id rutrum justo volutpat dapibus. Phasellus sollicitudin sapien eget tortor pharetra sollicitudin. Morbi vitae mattis augue. Proin sed tellus mi. Etiam sit amet tempus orci.",
  type: 'picture',
};

const videoPostMp4 = {
  date: 1504609289000,
  id: '108311429241313_1678040122268428',
  media: {
    thumbnail:
      'https://scontent.xx.fbcdn.net/v/t50.2886-16/58327909_1099958263525765_8738619719768080384_n.mp4?_nc_cat=104&_nc_ht=scontent.xx&oh=d46c3b8d3b02e476a217c5470367bd35&oe=5D353E6C',
  },
  serviceLink: 'https://facebook.com/108311429241313/posts/1678040122268428',
  statistics: {
    postClicks: 122,
    postImpressions: 123333,
    postReach: 12122,
    reactions: 123,
    engagement_rate: 5.6,
  },
  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mauris justo, auctor ac odio non, lacinia eleifend lorem. Nunc est eros, commodo ac ex vel, imperdiet rutrum massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sapien quam, iaculis at scelerisque a, volutpat nec metus. Suspendisse augue tellus, feugiat quis posuere in, volutpat sit amet orci. Quisque lacus nisl, ornare lacinia risus at, pellentesque ullamcorper turpis. Curabitur ut fermentum turpis. Aenean luctus porta ipsum, nec mollis erat. Aliquam condimentum orci ex, id rutrum justo volutpat dapibus. Phasellus sollicitudin sapien eget tortor pharetra sollicitudin. Morbi vitae mattis augue. Proin sed tellus mi. Etiam sit amet tempus orci.",
  type: 'video',
};

const videoPost = {
  date: 1504609289000,
  id: '108311429241313_1678040122268428',
  media: {
    thumbnail: 'https://buffer-media-uploads.s3.amazonaws.com/59a4711d7cbc83d309960116/5ed19955e0c4785b990ec752ff6df55c367f9808_dc779030b683e4f41ffa863f5c88795128de1d58_thumbnail',
  },
  serviceLink: 'https://facebook.com/108311429241313/posts/1678040122268428',
  statistics: {
    postClicks: 122,
    postImpressions: 123333,
    postReach: 12122,
    reactions: 123,
    engagement_rate: 5.6,
  },
  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mauris justo, auctor ac odio non, lacinia eleifend lorem. Nunc est eros, commodo ac ex vel, imperdiet rutrum massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sapien quam, iaculis at scelerisque a, volutpat nec metus. Suspendisse augue tellus, feugiat quis posuere in, volutpat sit amet orci. Quisque lacus nisl, ornare lacinia risus at, pellentesque ullamcorper turpis. Curabitur ut fermentum turpis. Aenean luctus porta ipsum, nec mollis erat. Aliquam condimentum orci ex, id rutrum justo volutpat dapibus. Phasellus sollicitudin sapien eget tortor pharetra sollicitudin. Morbi vitae mattis augue. Proin sed tellus mi. Etiam sit amet tempus orci.",
  type: 'video',
};

const linkPost = {
  date: 1504609289000,
  id: '108311429241313_1678040122268428',
  media: {
    thumbnail: 'https://buffer-media-uploads.s3.amazonaws.com/59a4711d7cbc83d309960116/5ed19955e0c4785b990ec752ff6df55c367f9808_dc779030b683e4f41ffa863f5c88795128de1d58_thumbnail',
  },
  serviceLink: 'https://facebook.com/108311429241313/posts/1678040122268428',
  statistics: {
    postClicks: 122,
    postImpressions: 123333,
    postReach: 12122,
    reactions: 123,
    engagement_rate: 5.6,
  },
  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mauris justo, auctor ac odio non, lacinia eleifend lorem. Nunc est eros, commodo ac ex vel, imperdiet rutrum massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sapien quam, iaculis at scelerisque a, volutpat nec metus. Suspendisse augue tellus, feugiat quis posuere in, volutpat sit amet orci. Quisque lacus nisl, ornare lacinia risus at, pellentesque ullamcorper turpis. Curabitur ut fermentum turpis. Aenean luctus porta ipsum, nec mollis erat. Aliquam condimentum orci ex, id rutrum justo volutpat dapibus. Phasellus sollicitudin sapien eget tortor pharetra sollicitudin. Morbi vitae mattis augue. Proin sed tellus mi. Etiam sit amet tempus orci.",
  type: 'link',
};

const CarouselPost = {
  date: 1504609289000,
  id: '108311429241313_1678040122268428',
  media: {
    thumbnail:
      'https://scontent.xx.fbcdn.net/v/t51.2885-15/56908103_416452628930789_766044784628339164_n.jpg?_nc_cat=100&_nc_ht=scontent.xx&oh=92225dc86777b4ec1b7dcd5b61946623&oe=5D2F89F5',
  },
  serviceLink: 'https://facebook.com/108311429241313/posts/1678040122268428',
  statistics: {
    postClicks: 122,
    postImpressions: 123333,
    postReach: 12122,
    reactions: 123,
    engagement_rate: 5.6,
  },
  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mauris justo, auctor ac odio non, lacinia eleifend lorem. Nunc est eros, commodo ac ex vel, imperdiet rutrum massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sapien quam, iaculis at scelerisque a, volutpat nec metus. Suspendisse augue tellus, feugiat quis posuere in, volutpat sit amet orci. Quisque lacus nisl, ornare lacinia risus at, pellentesque ullamcorper turpis. Curabitur ut fermentum turpis. Aenean luctus porta ipsum, nec mollis erat. Aliquam condimentum orci ex, id rutrum justo volutpat dapibus. Phasellus sollicitudin sapien eget tortor pharetra sollicitudin. Morbi vitae mattis augue. Proin sed tellus mi. Etiam sit amet tempus orci.",
  type: 'carousel_album',
};

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

storiesOf('PostItem')
  .addDecorator(checkA11y)
  .add('should render the top posts item', () => (
    <div style={style}>
      <PostItem
        post={post}
        index={122}
        config={config}
        timezone={'America/Los_Angeles'}
        onViewPost={onViewPost}
      />
    </div>
  ))
  .add('should hide view post button on report', () => (
    <div style={style}>
      <PostItem
        post={post}
        index={122}
        config={config}
        timezone={'America/Los_Angeles'}
        onViewPost={onViewPost}
        forReport
      />
    </div>
  ))
  .add('should render a video post', () => (
    <div style={style}>
      <PostItem
        post={videoPost}
        index={122}
        config={config}
        timezone={'America/Los_Angeles'}
      />
    </div>
  ))
  .add('should render a video post with mp4', () => (
    <div style={style}>
      <PostItem
        post={videoPostMp4}
        index={122}
        config={config}
        timezone={'America/Los_Angeles'}
      />
    </div>
  ))
  .add('should render a link post', () => (
    <div style={style}>
      <PostItem
        post={linkPost}
        index={122}
        config={config}
        timezone={'America/Los_Angeles'}
      />
    </div>
  ))
  .add('should render a carousel_album post', () => (
    <div style={style}>
      <PostItem
        post={CarouselPost}
        index={122}
        config={config}
        timezone={'America/Los_Angeles'}
      />
    </div>
  ))
  .add('should render a post with profile reference', () => (
    <div style={style}>
      <PostItem
        post={{
          ...CarouselPost,
          profile: {
            service: 'instagram',
            username: 'buffer',
          },
        }}
        index={122}
        config={config}
        timezone={'America/Los_Angeles'}
      />
    </div>
  ))
  .add('should not render the top posts item when no metrics', () => (
    <div style={style}>
      <PostItem
        post={post}
        index={122}
        config={config}
        timezone={'America/Los_Angeles'}
      />
    </div>
  ));