import type { Meta, StoryObj } from '@storybook/react';
import { fn } from 'storybook/test';
import { deepCamelKeys } from 'string-ts';

import COMMENTS_RESPONSE_JSON from '@/__fixtures__/comments.json';

import CommentListItem from './CommentListItem';

type PagePropsAndCustomArgs = Omit<
  React.ComponentProps<typeof CommentListItem>,
  'children'
> & {
  createdAt?: string;
};

const [COMMENT_UNLIKED, COMMENT_LIKED] = deepCamelKeys(
  COMMENTS_RESPONSE_JSON.results
);

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'features/Comments/CommentListItem',
  argTypes: {
    className: {
      control: { type: 'text' },
    },
    createdAt: { type: 'string' },
  },
  render: (args) => {
    const { createdAt = new Date().toISOString(), ...restProps } = args;

    return <CommentListItem {...restProps} createdAt={createdAt} />;
  },
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;

export const Comment: Story = {
  args: {
    commentId: COMMENT_UNLIKED.id,
    clipId: COMMENT_UNLIKED.clipId,
    parentId: COMMENT_UNLIKED.parentId,
    avatarUrl: COMMENT_UNLIKED.userAvatarUrl,
    handle: COMMENT_UNLIKED.userHandle,
    displayName: COMMENT_UNLIKED.userDisplayName,
    numLikes: COMMENT_UNLIKED.numLikes,
    isLiked: COMMENT_UNLIKED.reactionType === 'like',
    createdAt: COMMENT_UNLIKED.createdAt,
    content: COMMENT_UNLIKED.content,
    onProfileClick: fn(),
    onReplyClick: fn(),
    onLike: fn(),
    onDelete: fn(),
    onHide: fn(),
    onReport: fn(),
    onBlock: fn(),
  },
};

export const CommentLiked: Story = {
  args: {
    commentId: COMMENT_LIKED.id,
    clipId: COMMENT_LIKED.clipId,
    parentId: COMMENT_LIKED.parentId,
    avatarUrl: COMMENT_LIKED.userAvatarUrl,
    handle: COMMENT_LIKED.userHandle,
    displayName: COMMENT_LIKED.userDisplayName,
    numLikes: COMMENT_LIKED.numLikes,
    isLiked: COMMENT_LIKED.reactionType === 'like',
    createdAt: COMMENT_LIKED.createdAt,
    content: COMMENT_LIKED.content,
    onProfileClick: fn(),
    onReplyClick: fn(),
    onLike: fn(),
    onDelete: fn(),
    onHide: fn(),
    onReport: fn(),
    onBlock: fn(),
  },
};