import React from "react";
import { storiesOf } from "@storybook/react";
import { checkA11y } from "storybook-addon-a11y";
import ContentModal from "./index";
import { Card } from "./components/Card";
import allPosts from "../mocks/posts";

const mockFacebook = {
  date: 1585692364000,
  id: "108311429241313_3565871893485232",
  text:
    "“E-commerce retailers, including subscription-based companies, are shifting to more of a membership model, highlighting access beyond just the one product, and hoping this boosts retention rates.”",
  media: {
    thumbnail:
      "https://buffer-analyze-images.buffer.com/108311429241313/1578686417"
  },
  serviceLink: "https://facebook.com/108311429241313/posts/3565871893485232",
  statistics: {
    clicks: 58,
    comments: 0,
    engagement: 61,
    engagement_rate: 1.7005854474491218,
    impressions: 3587,
    likes: 1,
    reach: 3461,
    reactions: 2,
    shares: 1
  },
  type: "link",
  profile: {
    service_id: "108311429241313",
    service: "facebook",
    service_username: "buffer",
    service_avatar:
      "https://scontent-ams4-1.xx.fbcdn.net/v/t1.0-9/72569225_3218388231566935_7997871353086607360_n.png?_nc_cat=103&_nc_sid=85a577&_nc_ohc=LCPyHfF7DiAAX9_8mc7&_nc_ht=scontent-ams4-1.xx&oh=07ac669fdc8fb0b939aa323126e2c96e&oe=5E9B0B24"
  }
};

const mockTwitter = {
  date: 1585692364000,
  id: "1215590862509563905",
  media: {
    thumbnail:
      "https://buffer-analyze-images.buffer.com/108311429241313/1578686417",
    picture: "",
    video: null
  },
  serviceLink: "https://twitter.com/buffer/status/1215590862509563905",
  statistics: {
    replies: 0,
    engagements: 3,
    engagement_rate: 0.2,
    impressions: 1666,
    favorites: 1,
    retweets: 0,
    sent_at: 1578654420,
    url_clicks: 2
  },
  type: "link",
  text:
    "“E-commerce retailers, including subscription-based companies, are shifting to more of a membership model, highligh… https://t.co/2GapNa1B6O",
  profile: {
    service_id: "197962366",
    service: "twitter",
    service_username: "buffer",
    service_avatar:
      "https://pbs.twimg.com/profile_images/1145721989878956033/at7sBgO7_400x400.png",
    _id: "5c93b6c1dcfa5a0630380642"
  }
};

const mockNoImage = {
  date: 1585692364000,
  id: "1215590862509563905",
  media: {
    thumbnail: "",
    picture: "",
    video: null
  },
  serviceLink: "https://twitter.com/buffer/status/1215590862509563905",
  statistics: {
    replies: 0,
    engagements: 3,
    engagement_rate: 0.2,
    impressions: 1666,
    favorites: 1,
    retweets: 0,
    sent_at: 1578654420,
    url_clicks: 2
  },
  type: "link",
  text:
    "“E-commerce retailers, including subscription-based companies, are shifting to more of a membership model, highligh… https://t.co/2GapNa1B6O",
  profile: {
    service_id: "197962366",
    service: "twitter",
    service_username: "buffer",
    service_avatar:
      "https://pbs.twimg.com/profile_images/1145721989878956033/at7sBgO7_400x400.png",
    _id: "5c93b6c1dcfa5a0630380642"
  }
};

const mockInstagram = {
  date: 1585692364000,
  id: "17851038454788284",
  media: {
    thumbnail:
      "https://scontent.xx.fbcdn.net/v/t51.2885-15/81206894_2524228004504480_8826926878284441408_n.jpg?_nc_cat=100&_nc_oc=AQnERu_tLycL2u5-SNCqxnnYlR2zbM2MNh1VDONCK2xvBsy1_e_P3C7vwXL9GIId1sI&_nc_ht=scontent.xx&oh=9de7d7f39a8f4e08248567fe69a7c2d1&oe=5E98C0FA"
  },
  serviceLink: "https://www.instagram.com/p/B7JxRTLnzUG/",
  statistics: {
    comments: 9,
    engagement: 118,
    engagement_rate: 2.967060598441036,
    impressions: 3977,
    likes: 107,
    reach: 3666,
    saves: 9
  },
  type: "image",
  text:
    "The library is open! 🕶⁣⠀\n⁣⠀\nThe Buffer library, that is! 😄 ⁣⠀\nHead over to the link in our profile for hundreds of free resources to up your social media and marketing skills.",
  profile: {
    service_id: "17841400383014561",
    service: "instagram",
    service_username: "buffer",
    service_avatar:
      "https://scontent-ams4-1.xx.fbcdn.net/v/t1.0-9/72569225_3218388231566935_7997871353086607360_n.png?_nc_cat=103&_nc_sid=85a577&_nc_ohc=LCPyHfF7DiAAX9_8mc7&_nc_ht=scontent-ams4-1.xx&oh=07ac669fdc8fb0b939aa323126e2c96e&oe=5E9B0B24"
  }
};

const mockInstagramWithVideo = {
  date: 1585692364000,
  id: "17851038454788284",
  media: {
    thumbnail:
      "https://scontent.xx.fbcdn.net/v/t51.2885-15/81206894_2524228004504480_8826926878284441408_n.jpg?_nc_cat=100&_nc_oc=AQnERu_tLycL2u5-SNCqxnnYlR2zbM2MNh1VDONCK2xvBsy1_e_P3C7vwXL9GIId1sI&_nc_ht=scontent.xx&oh=9de7d7f39a8f4e08248567fe69a7c2d1&oe=5E98C0FA"
  },
  serviceLink: "https://www.instagram.com/p/B7JxRTLnzUG/",
  statistics: {
    comments: 9,
    engagement: 118,
    engagement_rate: 2.967060598441036,
    impressions: 3977,
    likes: 107,
    reach: 3666,
    saves: 9
  },
  type: "video",
  text:
    "The library is open! 🕶⁣⠀\n⁣⠀\nThe Buffer library, that is! 😄 ⁣⠀\nHead over to the link in our profile for hundreds of free resources to up your social media and marketing skills.",
  profile: {
    service_id: "17841400383014561",
    service: "instagram",
    service_username: "buffer",
    service_avatar:
      "https://scontent-ams4-1.xx.fbcdn.net/v/t1.0-9/72569225_3218388231566935_7997871353086607360_n.png?_nc_cat=103&_nc_sid=85a577&_nc_ohc=LCPyHfF7DiAAX9_8mc7&_nc_ht=scontent-ams4-1.xx&oh=07ac669fdc8fb0b939aa323126e2c96e&oe=5E9B0B24"
  }
};

// Need to double check that type: carousel is correct here
const mockInstagramWithCarousel = {
  date: 1585692364000,
  id: "17851038454788284",
  media: {
    thumbnail:
      "https://scontent.xx.fbcdn.net/v/t51.2885-15/81206894_2524228004504480_8826926878284441408_n.jpg?_nc_cat=100&_nc_oc=AQnERu_tLycL2u5-SNCqxnnYlR2zbM2MNh1VDONCK2xvBsy1_e_P3C7vwXL9GIId1sI&_nc_ht=scontent.xx&oh=9de7d7f39a8f4e08248567fe69a7c2d1&oe=5E98C0FA"
  },
  serviceLink: "https://www.instagram.com/p/B7JxRTLnzUG/",
  statistics: {
    comments: 9,
    engagement: 118,
    engagement_rate: 2.967060598441036,
    impressions: 3977,
    likes: 107,
    reach: 3666,
    saves: 9
  },
  type: "carousel",
  text:
    "The library is open! 🕶⁣⠀\n⁣⠀\nThe Buffer library, that is! 😄 ⁣⠀\nHead over to the link in our profile for hundreds of free resources to up your social media and marketing skills.",
  profile: {
    service_id: "17841400383014561",
    service: "instagram",
    service_username: "buffer",
    service_avatar:
      "https://scontent-ams4-1.xx.fbcdn.net/v/t1.0-9/72569225_3218388231566935_7997871353086607360_n.png?_nc_cat=103&_nc_sid=85a577&_nc_ohc=LCPyHfF7DiAAX9_8mc7&_nc_ht=scontent-ams4-1.xx&oh=07ac669fdc8fb0b939aa323126e2c96e&oe=5E9B0B24"
  }
};

storiesOf("ContentModal")
  .addDecorator(checkA11y)
  .add("should render", () => <ContentModal posts={allPosts[2].posts} />)
  .add("should render with 1 post", () => <ContentModal posts={allPosts[1].posts} />)
  .add("should render a card for facebook", () => (
    <div
      style={{
        background: "rgba(91, 98, 105, 0.8",
        height: "100vh",
        padding: "50px"
      }}
    >
      <Card post={mockFacebook} />
    </div>
  ))
  .add("should render a card for twitter", () => (
    <div
      style={{
        background: "rgba(91, 98, 105, 0.8",
        height: "100vh",
        padding: "50px"
      }}
    >
      <Card post={mockTwitter} />
    </div>
  ))
  .add("should render a card for instagram image", () => (
    <div
      style={{
        background: "rgba(91, 98, 105, 0.8",
        height: "100vh",
        padding: "50px"
      }}
    >
      <Card post={mockInstagram} />
    </div>
  ))
  .add("should render a card for instagram video", () => (
    <div
      style={{
        background: "rgba(91, 98, 105, 0.8",
        height: "100vh",
        padding: "50px"
      }}
    >
      <Card post={mockInstagramWithVideo} />
    </div>
  ))
  .add("should render a card for instagram carousel", () => (
    <div
      style={{
        background: "rgba(91, 98, 105, 0.8",
        height: "100vh",
        padding: "50px"
      }}
    >
      <Card post={mockInstagramWithCarousel} />
    </div>
  ))
  .add("should render a card without an image", () => (
    <div
      style={{
        background: "rgba(91, 98, 105, 0.8",
        height: "100vh",
        padding: "50px"
      }}
    >
      <Card post={mockNoImage} />
    </div>
  ));