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

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

import ImageUploader from './ImageUploader';

type PagePropsAndCustomArgs = React.ComponentProps<typeof ImageUploader>;

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

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

function ImageUploaderDemo(props: PagePropsAndCustomArgs) {
  const { onImageChanged } = props;
  const [image, setImage] = useState<string | null>(null);
  const handleImageChanged = useCallback<
    PagePropsAndCustomArgs['onImageChanged']
  >(
    (imageData) => {
      setImage(imageData);
      return onImageChanged?.(imageData);
    },
    [onImageChanged]
  );
  return (
    <VerticalSplitGroup className='fixed inset-0'>
      <SplitPanel
        className='bg-background-tertiary p-10'
        style={{ width: 600 }}
      >
        <ImageUploader {...props} onImageChanged={handleImageChanged} />
      </SplitPanel>
      <SplitPanel className='flex-1 bg-black'>
        <h1>Cropped image</h1>
        {image && <img className='bg-black' src={image} alt='' />}
      </SplitPanel>
    </VerticalSplitGroup>
  );
}

export const Default: Story = {
  render: (args) => <ImageUploaderDemo {...args} />,
  args: {
    initialImageURL: '/campaign/timbaland/hero.jpg',
    onImageChanged: fn((imageData: string | null) => {
      console.log('imageData', imageData);
    }),
  },
};

export const Blank: Story = {
  args: {
    onImageChanged: fn((imageData: string | null) => {
      console.log('imageData', imageData);
    }),
  },
};

export const InitialImage: Story = {
  args: {
    initialImageURL: '/campaign/timbaland/hero.jpg',
    onImageChanged: fn((imageData: string | null) => {
      console.log('imageData', imageData);
    }),
  },
};

export const InnerDimensions: Story = {
  args: {
    initialImageURL: '/campaign/timbaland/hero.jpg',
    onImageChanged: fn((imageData: string | null) => {
      console.log('imageData', imageData);
    }),
    innerWidth: 90,
    innerHeight: 160,
  },
};