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

import NOTIFICATIONS_RESPONSE_JSON from '@/__fixtures__/notifications_v2.json';
import { NotificationV2Schema } from '@/state/notificationsStore';

import NotificationV2ListItem from './NotificationV2ListItem';

type PagePropsAndCustomArgs = Omit<
  React.ComponentProps<typeof NotificationV2ListItem>,
  'children' | 'notification'
> & {
  displayName?: string;
  handle?: string;
  avatarImageUrl?: string;
  isFollowing?: boolean;
  contentTitle?: string;
  contentImageUrl?: string;
  updatedAt?: string;
  isRead?: boolean;
  notificationType: NotificationV2Schema['notification_type'];
};

const [
  NOTIFICATION_CLIP_LIKE,
  NOTIFICATION_PLAYLIST_LIKE,
  NOTIFICATION_FOLLOW,
  NOTIFICATION_CLIP_COMMENT,
  NOTIFICATION_COMMENT_LIKE,
  NOTIFICATION_COMMENT_REPLY,
] = NOTIFICATIONS_RESPONSE_JSON.notifications as [
  NotificationV2Schema,
  NotificationV2Schema,
  NotificationV2Schema,
  NotificationV2Schema,
  NotificationV2Schema,
  NotificationV2Schema,
];

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'system/NotificationV2ListItem',
  argTypes: {
    className: {
      control: { type: 'text' },
    },
    notificationType: {
      control: {
        type: 'select',
        labels: {
          clip_like: 'Song Like',
          playlist_like: 'Playlist Like',
          follow: 'Follow',
          clip_comment: 'Clip Comment',
          scene_comment: 'Scene Comment',
          comment_like: 'Comment Like',
          comment_reply: 'Comment Reply',
          persona_follow: 'Persona Follow',
          persona_favorite: 'Persona Favorite',
          persona_used: 'Persona Used',
        },
      },
      options: [
        'clip_like',
        'playlist_like',
        'follow',
        'clip_comment',
        'scene_comment',
        'comment_like',
        'comment_reply',
        'persona_follow',
        'persona_favorite',
        'persona_used',
      ],
    },
    updatedAt: { type: 'string' },
  },
  render: (args) => {
    const {
      notificationType = 'follow',
      handle = notificationType === 'clip_like'
        ? NOTIFICATION_CLIP_LIKE.user_profiles?.[0]?.handle
        : 'user_handle',
      displayName,
      avatarImageUrl = '',
      isFollowing = false,
      contentTitle = 'Content Title',
      contentImageUrl = 'https://cdn2.suno.ai/image_8acdc3b3-f7fa-4fda-8859-42d33ff5eb2b.jpeg',
      isRead = false,
      updatedAt = new Date().toISOString(),
      ...restProps
    } = args;

    const notification: NotificationV2Schema = {
      id: 'test-id',
      updated_at: updatedAt,
      is_read: isRead,
      notification_type: notificationType,
      user_profiles: [
        {
          display_name: displayName || handle,
          handle: handle,
          avatar_image_url: avatarImageUrl,
          is_following: isFollowing,
        },
      ],
      total_users: 1,
      content_id: 'test-content-id',
      content_title: contentTitle,
      content_image_url: contentImageUrl,
      content_message: 'test-content-message',
      redirect_url: 'test-redirect-url',
      /**
      /**
       * Casting as a quick fix, since  `react_content` might not be valid for
       * the `notificationType`
       */
    } as NotificationV2Schema;

    return (
      <NotificationV2ListItem {...restProps} notification={notification} />
    );
  },
};

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

export const SongLike: Story = {
  args: {
    notificationType: 'clip_like',
    handle: NOTIFICATION_CLIP_LIKE.user_profiles?.[0]?.handle || '',
    displayName: NOTIFICATION_CLIP_LIKE.user_profiles?.[0]?.display_name || '',
    isFollowing:
      NOTIFICATION_CLIP_LIKE.user_profiles?.[0]?.is_following || false,
    avatarImageUrl:
      NOTIFICATION_CLIP_LIKE.user_profiles?.[0]?.avatar_image_url || '',
    contentTitle: NOTIFICATION_CLIP_LIKE.content_title || '',
    contentImageUrl: NOTIFICATION_CLIP_LIKE.content_image_url || '',
    updatedAt: NOTIFICATION_CLIP_LIKE.updated_at,
    onDotClick: fn(),
    onProfileClick: fn(),
    onContentClick: fn(),
    onFollowClick: fn(),
  },
};

export const PlaylistLike: Story = {
  args: {
    notificationType: 'playlist_like',
    handle: NOTIFICATION_PLAYLIST_LIKE.user_profiles?.[0]?.handle || '',
    displayName:
      NOTIFICATION_PLAYLIST_LIKE.user_profiles?.[0]?.display_name || '',
    avatarImageUrl:
      NOTIFICATION_PLAYLIST_LIKE.user_profiles?.[0]?.avatar_image_url || '',
    isFollowing:
      NOTIFICATION_PLAYLIST_LIKE.user_profiles?.[0]?.is_following || false,
    contentTitle: NOTIFICATION_PLAYLIST_LIKE.content_title || '',
    contentImageUrl: NOTIFICATION_PLAYLIST_LIKE.content_image_url || '',
    updatedAt: NOTIFICATION_PLAYLIST_LIKE.updated_at,
    onDotClick: fn(),
    onProfileClick: fn(),
    onContentClick: fn(),
    onFollowClick: fn(),
  },
};

export const Follow: Story = {
  args: {
    notificationType: 'follow',
    handle: NOTIFICATION_FOLLOW.user_profiles?.[0]?.handle || '',
    displayName: NOTIFICATION_FOLLOW.user_profiles?.[0]?.display_name || '',
    avatarImageUrl:
      NOTIFICATION_FOLLOW.user_profiles?.[0]?.avatar_image_url || '',
    isFollowing: NOTIFICATION_FOLLOW.user_profiles?.[0]?.is_following || false,
    updatedAt: NOTIFICATION_FOLLOW.updated_at,
    onDotClick: fn(),
    onProfileClick: fn(),
    onContentClick: fn(),
    onFollowClick: fn(),
  },
};

export const ClipComment: Story = {
  args: {
    notificationType: 'clip_comment',
    handle: NOTIFICATION_CLIP_COMMENT.user_profiles?.[0]?.handle || '',
    displayName:
      NOTIFICATION_CLIP_COMMENT.user_profiles?.[0]?.display_name || '',
    avatarImageUrl:
      NOTIFICATION_CLIP_COMMENT.user_profiles?.[0]?.avatar_image_url || '',
    isFollowing:
      NOTIFICATION_CLIP_COMMENT.user_profiles?.[0]?.is_following || false,
    contentTitle: NOTIFICATION_CLIP_COMMENT.content_title || '',
    contentImageUrl: NOTIFICATION_CLIP_COMMENT.content_image_url || '',
    updatedAt: NOTIFICATION_CLIP_COMMENT.updated_at,
    onDotClick: fn(),
    onProfileClick: fn(),
    onContentClick: fn(),
    onFollowClick: fn(),
  },
};

export const CommentLike: Story = {
  args: {
    notificationType: 'comment_like',
    handle: NOTIFICATION_COMMENT_LIKE.user_profiles?.[0]?.handle || '',
    displayName:
      NOTIFICATION_COMMENT_LIKE.user_profiles?.[0]?.display_name || '',
    avatarImageUrl:
      NOTIFICATION_COMMENT_LIKE.user_profiles?.[0]?.avatar_image_url || '',
    isFollowing:
      NOTIFICATION_COMMENT_LIKE.user_profiles?.[0]?.is_following || false,
    contentTitle: NOTIFICATION_COMMENT_LIKE.content_title || '',
    contentImageUrl: NOTIFICATION_COMMENT_LIKE.content_image_url || '',
    updatedAt: NOTIFICATION_COMMENT_LIKE.updated_at,
    onDotClick: fn(),
    onProfileClick: fn(),
    onContentClick: fn(),
    onFollowClick: fn(),
  },
};

export const CommentReply: Story = {
  args: {
    notificationType: 'comment_reply',
    handle: NOTIFICATION_COMMENT_REPLY.user_profiles?.[0]?.handle || '',
    displayName:
      NOTIFICATION_COMMENT_REPLY.user_profiles?.[0]?.display_name || '',
    avatarImageUrl:
      NOTIFICATION_COMMENT_REPLY.user_profiles?.[0]?.avatar_image_url || '',
    isFollowing:
      NOTIFICATION_COMMENT_REPLY.user_profiles?.[0]?.is_following || false,
    contentTitle: NOTIFICATION_COMMENT_REPLY.content_title || '',
    contentImageUrl: NOTIFICATION_COMMENT_REPLY.content_image_url || '',
    updatedAt: NOTIFICATION_COMMENT_REPLY.updated_at,
    onDotClick: fn(),
    onProfileClick: fn(),
    onContentClick: fn(),
    onFollowClick: fn(),
  },
};