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

import FEATURED_FEED_JSON from '@/__fixtures__/featured_feed.json';
import { useStores } from '@/app/(root)/AppProviders';
import FeedItem from '@/components/feed/SongFeedItem';
import Playbar from '@/components/playbar/Playbar';
import { SelectedItemProvider } from '@/hooks/useSelectedItem';
import { components } from '@/lib/gen';
import { getClipDisplayTags } from '@/utils/clip';

type PagePropsAndCustomArgs = React.ComponentProps<typeof FeedItem>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/feed/SongFeedItem',
  component: FeedItem,
  argTypes: {
    playCount: {
      control: { type: 'number' },
    },
    upvoteCount: {
      control: { type: 'number' },
    },
    commentCount: {
      control: { type: 'number' },
    },
  },
};

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

const feedItem = FEATURED_FEED_JSON.sections[0].items[0]
  .items[1] as components['schemas']['GeneratedClipSchema'];
const feedItemWithPersona = FEATURED_FEED_JSON.sections[0].items[2]
  .items[4] as components['schemas']['GeneratedClipSchema'];

function SongFeedItemDemo(
  props: PagePropsAndCustomArgs & {
    clip: components['schemas']['GeneratedClipSchema'];
  }
) {
  const { clip } = props;
  const { clips: clipStore } = useStores();
  useEffect(() => {
    clipStore.updateClips([clip]);
  }, [clipStore, clip]);
  return (
    <>
      <Playbar />
      <SelectedItemProvider>
        <FeedItem {...props} />
      </SelectedItemProvider>
    </>
  );
}

export const Default: Story = {
  render: (args) => <SongFeedItemDemo {...args} clip={feedItem} />,
  args: {
    imgUrl: feedItem.image_url ?? '',
    title: feedItem.title,
    clipId: feedItem.id,
    tags: getClipDisplayTags(feedItem),
    displayName: feedItem.display_name ?? '',
    handle: feedItem.handle ?? '',
    avatarImageUrl: feedItem.avatar_image_url ?? '',
    personaId: feedItem.persona?.id ?? '',
    personaName: feedItem.persona?.name ?? '',
    personaImageUrl: feedItem.persona?.image_s3_id ?? '',
    playCount: feedItem.play_count ?? 0,
    upvoteCount: feedItem.upvote_count ?? 0,
    commentCount: feedItem.comment_count ?? 0,
  },
};

export const WithPersona: Story = {
  render: (args) => <SongFeedItemDemo {...args} clip={feedItemWithPersona} />,
  args: {
    imgUrl: feedItemWithPersona.image_url ?? '',
    title: feedItemWithPersona.title,
    clipId: feedItemWithPersona.id,
    tags: getClipDisplayTags(feedItemWithPersona),
    displayName: feedItemWithPersona.display_name ?? '',
    handle: feedItemWithPersona.handle ?? '',
    avatarImageUrl: feedItemWithPersona.avatar_image_url ?? '',
    personaId: feedItemWithPersona.persona?.id ?? '',
    personaName: feedItemWithPersona.persona?.name ?? '',
    personaImageUrl: feedItemWithPersona.persona?.image_s3_id ?? '',
    playCount: feedItemWithPersona.play_count ?? 0,
    upvoteCount: feedItemWithPersona.upvote_count ?? 0,
    commentCount: feedItemWithPersona.comment_count ?? 0,
  },
};