import { defineStory, useBoolean, useSelect } from '@djangocfg/playground';
import { VideoPlayer } from './index';
import type { VideoSourceUnion } from './types';

export default defineStory({
  title: 'Tools/Video Player',
  component: VideoPlayer,
  description: 'Video player with HLS support, quality selection, and custom controls.',
});

const VIDEO_SOURCES: Record<string, VideoSourceUnion> = {
  mp4: {
    type: 'url',
    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    poster: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
    title: 'Big Buck Bunny',
  },
  hls: {
    type: 'hls',
    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    title: 'HLS Stream',
  },
  elephants: {
    type: 'url',
    url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
    poster: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg',
    title: "Elephant's Dream",
  },
};

export const Interactive = () => {
  const [sourceKey] = useSelect('source', {
    options: ['mp4', 'hls', 'elephants'] as const,
    defaultValue: 'mp4',
    label: 'Video Source',
    description: 'Select video source type',
  });

  const [autoplay] = useBoolean('autoplay', {
    defaultValue: false,
    label: 'Autoplay',
    description: 'Auto-start video playback',
  });

  const [muted] = useBoolean('muted', {
    defaultValue: false,
    label: 'Muted',
    description: 'Mute video audio',
  });

  const [loop] = useBoolean('loop', {
    defaultValue: false,
    label: 'Loop',
    description: 'Loop video playback',
  });

  const source = VIDEO_SOURCES[sourceKey];

  return (
    <div className="max-w-3xl" key={sourceKey}>
      <VideoPlayer
        source={source}
        autoPlay={autoplay}
        muted={muted}
        loop={loop}
      />
    </div>
  );
};

export const MP4 = () => (
  <div className="max-w-3xl">
    <VideoPlayer source={VIDEO_SOURCES.mp4} />
  </div>
);

export const HLS = () => (
  <div className="max-w-3xl">
    <VideoPlayer source={VIDEO_SOURCES.hls} />
  </div>
);

export const WithPoster = () => (
  <div className="max-w-3xl">
    <VideoPlayer source={VIDEO_SOURCES.elephants} />
  </div>
);
