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

import { SplitPanel, VerticalSplitGroup } from '@/components/layout/SplitPanel';

import SlideCarousel from './SlideCarousel';

type PagePropsAndCustomArgs = React.ComponentProps<typeof SlideCarousel>;

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

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

const DemoSlideCarousel: React.FC<
  React.ComponentProps<typeof SlideCarousel>
> = (props) => {
  const [slides, slideOrder] = useMemo(() => {
    return [
      {
        red: (
          <div className='min-h-full w-full bg-[#cc0000]'>
            {new Array(1000).fill('Red').map((value, i) => (
              <p key={i}>{value}</p>
            ))}
          </div>
        ),
        green: <div className='min-h-full w-full bg-[#00aa33]'>Green</div>,
        blue: (
          <div className='min-h-full w-full bg-[#0022ee]'>
            {new Array(8).fill('Blue').map((value, i) => (
              <p key={i}>{value}</p>
            ))}
          </div>
        ),
      },
      ['red', 'green', 'blue'],
    ];
  }, []);

  return <SlideCarousel {...props} slides={slides} slideOrder={slideOrder} />;
};

export const Default: Story = {
  render(args) {
    return (
      <VerticalSplitGroup className='fixed inset-0'>
        <SplitPanel className='flex-1 bg-black' />
        <SplitPanel style={{ width: 200 }}>
          <DemoSlideCarousel {...args} />
        </SplitPanel>
      </VerticalSplitGroup>
    );
  },
};