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

import FEATURED_FEED_JSON from '@/__fixtures__/featured_feed.json';
import SUGGESTED_CREATOR_FEED_ITEM_JSON from '@/__fixtures__/featured_feed_suggested_creator.json';
import { useStores } from '@/app/(root)/AppProviders';
import FeaturedFeed from '@/components/feed/FeaturedFeed';
import Playbar from '@/components/playbar/Playbar';
import { components } from '@/lib/gen';
import { Clip } from '@/state/clipStore';

type PagePropsAndCustomArgs = React.ComponentProps<typeof FeaturedFeed>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/feed/FeaturedFeed',
  component: FeaturedFeed,
};

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

function FeaturedFeedDemo(props: PagePropsAndCustomArgs) {
  const { feedItemLists } = props;
  const { clips: clipsStore } = useStores();
  useEffect(() => {
    feedItemLists.forEach((feedItemList) => {
      if (feedItemList.id === 'featured_feed_following') {
        const featuredFeedItems: Clip[] = [];
        feedItemList.items?.forEach((item: any) => {
          if (item.clip_schema) {
            featuredFeedItems.push(item.clip_schema as Clip);
          }
        });
        clipsStore.updateClips(featuredFeedItems);
      } else {
        clipsStore.updateClips(feedItemList.items as Clip[]);
      }
    });
  }, [clipsStore, feedItemLists]);
  return (
    <>
      <FeaturedFeed {...props} />
      <Playbar />
    </>
  );
}

export const Default: Story = {
  render: (args) => <FeaturedFeedDemo {...args} />,
  args: {
    feedItemLists: FEATURED_FEED_JSON.sections[0]
      .items as components['schemas']['FeaturedFeedSectionSchema']['items'],
  },
};

const feedWithSuggestedCreator = SUGGESTED_CREATOR_FEED_ITEM_JSON.sections[0]
  .items as components['schemas']['FeaturedFeedSectionSchema']['items'];

export const WithSuggestedCreator: Story = {
  render: (args) => <FeaturedFeedDemo {...args} />,
  args: {
    feedItemLists: feedWithSuggestedCreator,
  },
};