import { defineStory, useSelect, useBoolean, useNumber } from '@djangocfg/playground';
import { ImageViewer } from './index';

export default defineStory({
  title: 'Tools/ImageViewer',
  component: ImageViewer,
  description: 'Image viewer with zoom, pan, rotate, flip and gallery navigation.',
});

const IMAGES = [
  {
    file: { name: 'Mountain landscape', path: 'https://picsum.photos/seed/mountain/1200/800' },
    src: 'https://picsum.photos/seed/mountain/1200/800',
  },
  {
    file: { name: 'City skyline', path: 'https://picsum.photos/seed/city/1200/800' },
    src: 'https://picsum.photos/seed/city/1200/800',
  },
  {
    file: { name: 'Forest path', path: 'https://picsum.photos/seed/forest/1200/800' },
    src: 'https://picsum.photos/seed/forest/1200/800',
  },
  {
    file: { name: 'Ocean sunset', path: 'https://picsum.photos/seed/ocean/1200/800' },
    src: 'https://picsum.photos/seed/ocean/1200/800',
  },
];

export const Interactive = () => {
  const [count] = useNumber('imageCount', {
    defaultValue: 4,
    min: 1,
    max: 4,
    label: 'Number of images',
    description: 'How many images to show in gallery',
  });

  const [initialIndex] = useNumber('initialIndex', {
    defaultValue: 0,
    min: 0,
    max: 3,
    label: 'Initial index',
    description: 'Which image to open first',
  });

  const [inDialog] = useBoolean('inDialog', {
    defaultValue: false,
    label: 'inDialog',
    description: 'Hide the fullscreen expand button',
  });

  return (
    <div className="w-full h-[500px]">
      <ImageViewer
        images={IMAGES.slice(0, count)}
        initialIndex={Math.min(initialIndex, count - 1)}
        inDialog={inDialog}
      />
    </div>
  );
};

export const SingleImage = () => (
  <div className="w-full h-[500px]">
    <ImageViewer images={[IMAGES[0]]} />
  </div>
);

export const Gallery = () => (
  <div className="w-full h-[500px]">
    <ImageViewer images={IMAGES} initialIndex={0} />
  </div>
);

export const OpenAtIndex = () => (
  <div className="w-full h-[500px]">
    <ImageViewer images={IMAGES} initialIndex={2} />
  </div>
);

export const InDialog = () => (
  <div className="w-full h-[500px]">
    <ImageViewer images={IMAGES} inDialog />
  </div>
);
