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

import HOMEPAGE_RESPONSE_JSON from '@/__fixtures__/homepage.json';
import { components } from '@/lib/gen';

import DiscoverCard from './DiscoverCard';
import DiscoverCardMeta from './DiscoverCardMeta';
import DiscoverPlaylistCard from './DiscoverPlaylistCard';

type PagePropsAndCustomArgs = React.ComponentProps<typeof DiscoverCard>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/DiscoverCard',
  component: DiscoverCard,
  argTypes: {
    className: {
      control: { type: 'text' },
    },
  },
};

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

const section = HOMEPAGE_RESPONSE_JSON
  .sections[0] as components['schemas']['PlaylistListSectionSchema'];

export const Default: Story = {
  render() {
    return (
      <DiscoverCard
        className='h-[257px] w-[386px]'
        backgroundContent='url(/campaign/timbaland/hero.jpg)'
      >
        <DiscoverCardMeta
          metadata={
            <div className='flex flex-row gap-2'>
              <div>Beep</div>
              <div>Boop</div>
            </div>
          }
          title='This is a headline'
          subtitle='There are many variations of passages of Lorem Ipsum available'
        />
      </DiscoverCard>
    );
  },
};

function PlaylistDemo(
  props: React.ComponentProps<typeof DiscoverPlaylistCard>
) {
  const { onPlayPauseClick, ...restProps } = props;
  const [isPlaying, setIsPlaying] = useState(false);
  return (
    <DiscoverPlaylistCard
      {...restProps}
      isPlaying={isPlaying}
      onPlayPauseClick={(...args) => {
        setIsPlaying((prevIsPlaying) => !prevIsPlaying);
        onPlayPauseClick?.(...args);
      }}
    />
  );
}

export const Playlist: StoryObj<
  React.ComponentProps<typeof DiscoverPlaylistCard>
> = {
  render: (args) => <PlaylistDemo {...args} />,
  args: {
    playlistId: 'test',
    playlistImage: section.items[0].image_url ?? undefined,
    playlistTitle: section.items[0].name,
    playlistDescription: section.items[0].description,
    playlistAuthorAvatar: section.items[0].user_avatar_image_url ?? undefined,
    playlistAuthorDisplayName: section.items[0].user_display_name ?? undefined,
    playlistAuthorHandle: section.items[0].user_handle ?? undefined,
    // playlistAuthorHref: section.items[0].user_display_name,
    songCount: section.items[0].song_count ?? undefined,
    // playCount: section.items[0].play_count,
    likeCount: section.items[0].upvote_count ?? undefined,
    backgroundClassName: section.items[0].image_url ?? undefined,
    onPlayPauseClick: fn(),
    // onPlayCountClick: fn(),
    onLikeClick: fn(),
    // onCommentClick: fn(),
  },
};