import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
import Comments from './index'

export const lesson = {
  add_comment_url: 'add_comment_url',
  comments: [
    {
      comment: 'Lorem ipsum dolor sit amet.',
      created_at: '2020-05-17T03:49:09-05:00',
      is_commentable_owner: false,
      state: 'published',
      user: {
        avatar_url:
          '//gravatar.com/avatar/3395ef1e1abbacb64beda2b9c9f82fd6.png?s=128&d=mp',
        full_name: 'Yariv',
      },
    },
    {
      comment: 'Lorem ipsum dolor sit amet.',
      created_at: '2020-05-18T08:16:27-05:00',
      is_commentable_owner: true,
      state: 'published',
      user: {
        avatar_url:
          'https://d2eip9sf3oo6c2.cloudfront.net/instructors/avatars/000/000/011/medium/photo-512.png',
        full_name: 'Kent C. Dodds',
      },
    },
  ],
}

export const lessonNotAbletoComment = {
  add_comment_url: null,
  comments: [
    {
      comment: 'Lorem ipsum dolor sit amet.',
      created_at: '2020-05-18T08:16:27-05:00',
      is_commentable_owner: true,
      state: 'published',
      user: {
        avatar_url:
          '//gravatar.com/avatar/c1c563b36d23e34002036e1de405f9ca.png?s=128&d=mp',
        full_name: 'Kent C. Dodds',
      },
    },
  ],
}

export const lessonNoComments = {
  add_comment_url: 'add_comment_url',
  comments: [],
}

export const lessonNoCommentsNotAbleToComment = {
  add_comment_url: null,
  comments: [],
}

<Meta title="Components/Lessons/Comments/Comments" />

# Comments component

Gets following props:

**lesson**: `lesson` object supposed to contain `comments` and `add_comment_url` fields

**commentingAllowed**: `NEXT_PUBLIC_FF_COMMENTING_AVAILABLE` variable can be used here |

<Canvas>
  <Story name="Comments exist">
    <div className="dark:bg-gray-900 p-5">
      <Comments lesson={lesson} commentingAllowed={true} />
    </div>
  </Story>
  <Story name="Comments exist and user is NOT able to comment">
    <div className="dark:bg-gray-900 p-5">
      <Comments lesson={lessonNotAbletoComment} commentingAllowed={true} />
    </div>
  </Story>
  <Story name="No comments">
    <div className="dark:bg-gray-900 p-5">
      <Comments lesson={lessonNoComments} commentingAllowed={true} />
    </div>
  </Story>
  <Story name="No comments and user is NOT able to comment">
    <div className="dark:bg-gray-900 p-5">
      <Comments
        lesson={lessonNoCommentsNotAbleToComment}
        commentingAllowed={true}
      />
    </div>
  </Story>
</Canvas>
