import { defineStory, useBoolean, useSelect, useNumber } from '@djangocfg/playground';
import { Gallery, GalleryCompact, type GalleryMediaItem, type GalleryAspectRatio } from './index';

// Sample images for testing
const SAMPLE_IMAGES: GalleryMediaItem[] = [
  {
    id: '1',
    src: 'https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=800',
    thumbnail: 'https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=200',
    alt: 'Classic car',
  },
  {
    id: '2',
    src: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=800',
    thumbnail: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=200',
    alt: 'Porsche',
  },
  {
    id: '3',
    src: 'https://images.unsplash.com/photo-1542362567-b07e54358753?w=800',
    thumbnail: 'https://images.unsplash.com/photo-1542362567-b07e54358753?w=200',
    alt: 'BMW',
  },
  {
    id: '4',
    src: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=800',
    thumbnail: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=200',
    alt: 'Mercedes',
  },
  {
    id: '5',
    src: 'https://images.unsplash.com/photo-1617531653332-bd46c24f2068?w=800',
    thumbnail: 'https://images.unsplash.com/photo-1617531653332-bd46c24f2068?w=200',
    alt: 'Tesla',
  },
];

export default defineStory({
  title: 'Tools/Gallery',
  component: Gallery,
  description: 'Full-featured gallery with lightbox, thumbnails, and keyboard navigation.',
});

export const CarouselMode = () => (
  <div className="max-w-4xl">
    <Gallery
      images={SAMPLE_IMAGES}
      previewMode="carousel"
      showThumbnails
      showControls
      showCounter
      enableLightbox
      enableKeyboard
      aspectRatio={16 / 9}
    />
  </div>
);

export const GridMode = () => (
  <div className="max-w-4xl">
    <Gallery
      images={SAMPLE_IMAGES}
      previewMode="grid"
      previewCount={5}
      enableLightbox
      aspectRatio={16 / 9}
    />
  </div>
);

export const WithoutThumbnails = () => (
  <div className="max-w-4xl">
    <Gallery
      images={SAMPLE_IMAGES}
      previewMode="carousel"
      showThumbnails={false}
      showControls
      enableLightbox
      aspectRatio={16 / 9}
    />
  </div>
);

export const Compact = {
  render: (args: {
    showDots: boolean;
    showArrows: boolean;
    enableZoom: boolean;
    showCounter: boolean;
  }) => (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div className="rounded-xl border border-border overflow-hidden">
        <div className="aspect-[4/3]">
          <GalleryCompact
            images={SAMPLE_IMAGES}
            showDots={args.showDots}
            showArrows={args.showArrows}
            enableZoom={args.enableZoom}
            showCounter={args.showCounter}
          />
        </div>
        <div className="p-4">
          <h3 className="font-medium">Vehicle Title</h3>
          <p className="text-sm text-muted-foreground">$25,000</p>
        </div>
      </div>
    </div>
  ),
  args: {
    showDots: true,
    showArrows: true,
    enableZoom: true,
    showCounter: false,
  },
  argTypes: {
    showDots: { control: 'boolean', description: 'Show navigation dots' },
    showArrows: { control: 'boolean', description: 'Show arrow buttons' },
    enableZoom: { control: 'boolean', description: 'Enable zoom on hover' },
    showCounter: { control: 'boolean', description: 'Show image counter' },
  },
};

export const SingleImage = () => (
  <div className="w-64">
    <div className="rounded-xl border border-border overflow-hidden">
      <div className="aspect-[4/3]">
        <GalleryCompact images={SAMPLE_IMAGES.slice(0, 1)} enableZoom />
      </div>
    </div>
  </div>
);

export const EmptyState = () => (
  <div className="w-64">
    <div className="rounded-xl border border-border overflow-hidden">
      <div className="aspect-[4/3]">
        <GalleryCompact images={[]} />
      </div>
    </div>
  </div>
);

/**
 * Interactive story using fixture hooks
 * Controls appear automatically in the right sidebar
 */
export const Interactive = () => {
  // These hooks auto-register controls in the Properties panel
  const [showDots] = useBoolean('showDots', {
    defaultValue: true,
    label: 'Show Dots',
    description: 'Display navigation dots at the bottom',
  });

  const [showArrows] = useBoolean('showArrows', {
    defaultValue: true,
    label: 'Show Arrows',
    description: 'Display navigation arrows on hover',
  });

  const [enableZoom] = useBoolean('enableZoom', {
    defaultValue: true,
    label: 'Enable Zoom',
    description: 'Zoom effect on image hover',
  });

  const [showCounter] = useBoolean('showCounter', {
    defaultValue: false,
    label: 'Show Counter',
    description: 'Display image counter badge',
  });

  const [maxDots] = useNumber('maxDots', {
    defaultValue: 5,
    min: 1,
    max: 10,
    label: 'Max Dots',
    description: 'Maximum number of dots to display',
  });

  const [previewMode] = useSelect('previewMode', {
    options: ['carousel', 'grid'] as const,
    defaultValue: 'carousel',
    label: 'Preview Mode',
    description: 'Gallery preview display mode',
  });

  const [aspectRatio] = useSelect('aspectRatio', {
    options: ['auto', '16/9', '4/3', '3/2', '1/1'] as const,
    defaultValue: '4/3' as GalleryAspectRatio,
    label: 'Aspect Ratio',
    description: 'Image container aspect ratio',
  });

  return (
    <div className="space-y-8">
      {/* GalleryCompact */}
      <div>
        <h3 className="text-lg font-semibold mb-4">GalleryCompact</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="rounded-xl border border-border overflow-hidden bg-black">
            <GalleryCompact
              images={SAMPLE_IMAGES}
              aspectRatio={aspectRatio}
              showDots={showDots}
              showArrows={showArrows}
              enableZoom={enableZoom}
              showCounter={showCounter}
              maxDots={maxDots}
            />
            <div className="p-4">
              <h3 className="font-medium">Interactive Card</h3>
              <p className="text-sm text-muted-foreground">Use controls on the right →</p>
            </div>
          </div>
        </div>
      </div>

      {/* Full Gallery */}
      <div>
        <h3 className="text-lg font-semibold mb-4">Full Gallery ({previewMode})</h3>
        <div className="max-w-4xl">
          <Gallery
            images={SAMPLE_IMAGES}
            previewMode={previewMode}
            showThumbnails
            showControls
            showCounter={showCounter}
            enableLightbox
            enableKeyboard
            aspectRatio={16 / 9}
          />
        </div>
      </div>
    </div>
  );
};
