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 FeedItemList, {
  FeedItemListProps,
} from '@/components/feed/FeedItemList';
import Playbar from '@/components/playbar/Playbar';
import { SelectedItemProvider } from '@/hooks/useSelectedItem';
import { Clip } from '@/state/clipStore';

type PagePropsAndCustomArgs = FeedItemListProps;

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

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

const feedItems = FEATURED_FEED_JSON.sections[0].items[0];

function FeedItemListDemo(props: PagePropsAndCustomArgs) {
  const { title } = props;
  const { clips: clipStore } = useStores();
  useEffect(() => {
    if (title === 'Following') {
      const featuredFeedItems: Clip[] = [];
      feedItems.items.forEach((item: any) => {
        if (item.clip_schema) {
          featuredFeedItems.push(item.clip_schema as Clip);
        }
      });
      clipStore.updateClips(featuredFeedItems);
    } else {
      clipStore.updateClips(feedItems.items as Clip[]);
    }
  }, [clipStore, title]);
  return (
    <>
      <Playbar />
      <SelectedItemProvider>
        <FeedItemList {...props} />
      </SelectedItemProvider>
    </>
  );
}

export const Default: Story = {
  render: (args) => <FeedItemListDemo {...args} />,
  args: {
    feedItems: feedItems.items as FeedItemListProps['feedItems'],
    title: feedItems.title,
  },
};