import type { Meta, StoryObj } from '@storybook/react';
import { identity } from 'lodash-es';
import React, { useState } from 'react';
import { fn } from 'storybook/test';

import Button from '@/components/button/Button';

import SimpleVideoPlayer, {
  Props,
  VideoPlayerProps,
} from './SimpleVideoPlayer';

type PagePropsAndCustomArgs = VideoPlayerProps & Pick<Props, 'className'>;

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

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

const SimpleVideoPlayerTest: React.FC<PagePropsAndCustomArgs> = (props) => {
  return (
    <SimpleVideoPlayer
      className='aspect-9/16 h-120'
      controls
      autoPlay
      {...props}
      onError={(e) => {
        console.log('it did not work', e);
        props.onError?.(e);
      }}
    />
  );
};

const SimpleVideoPlayerLazyTest: React.FC<PagePropsAndCustomArgs> = (props) => {
  const [needsLoad, setNeedsLoad] = useState(true);
  return (
    <div>
      <SimpleVideoPlayer
        className='aspect-9/16 h-120'
        controls
        autoPlay={false}
        preload={needsLoad ? 'none' : 'metadata'}
        {...props}
        onError={(e) => {
          console.log('it did not work', e);
          props.onError?.(e);
        }}
        onCanPlay={(e) => {
          setNeedsLoad(false);
          props.onCanPlay?.(e);
        }}
      />
      <Button onClick={() => setNeedsLoad(false)} disabled={!needsLoad}>
        Load video
      </Button>
    </div>
  );
};

const SimpleVideoPlayerTestWithFile: React.FC<PagePropsAndCustomArgs> = (
  props
) => {
  const [file, setFile] = useState<string | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setFile(URL.createObjectURL(file));
    }
  };

  return (
    <div>
      <SimpleVideoPlayer
        className='aspect-9/16 h-120'
        controls
        autoPlay
        url={file ?? undefined}
        {...props}
      />
      <div className='inline-block overflow-clip rounded-md border border-border-primary bg-background-primary text-foreground-primary'>
        <input
          className='min-h-full min-w-full cursor-pointer p-4'
          type='file'
          onChange={handleFileChange}
        />
      </div>
    </div>
  );
};

const eventHandlers: PagePropsAndCustomArgs = {
  onBuffering: fn(identity),
  onPlaybackError: fn(identity),
  onPlay: fn(identity),
  onPause: fn(identity),
  onEnded: fn(identity),
  onSeeking: fn(identity),
  onSeeked: fn(identity),
  onRateChange: fn(identity),
  onLoadStart: fn(identity),
  onLoadedMetadata: fn(identity),
  onLoadedData: fn(identity),
  onCanPlay: fn(identity),
  onCanPlayThrough: fn(identity),
  onProgress: fn(identity),
  onStalled: fn(identity),
  onSuspend: fn(identity),
  onAbort: fn(identity),
  onError: fn(identity),
  onEmptied: fn(identity),
  onTimeUpdate: fn(identity),
  onDurationChange: fn(identity),
  onVolumeChange: fn(identity),
  onWaiting: fn(identity),
  onPlaying: fn(identity),
};

export const MP4: Story = {
  name: 'MP4',
  render: (args) => <SimpleVideoPlayerTest {...args} />,
  args: {
    ...eventHandlers,
    url: ['https://cdn1.suno.ai/hook_5b13e84b-298d-493d-8d04-c68fd7a5b2a7.mp4'],
  },
};

export const Hls: Story = {
  name: 'HLS',
  render: (args) => <SimpleVideoPlayerTest {...args} />,
  args: {
    ...eventHandlers,
    className: 'aspect-16/9 h-120',
    url: ['https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'],
  },
};

export const HlsWithFallback: Story = {
  name: 'HLS (with fallback)',
  render: (args) => <SimpleVideoPlayerTest {...args} />,
  args: {
    ...eventHandlers,
    url: [
      'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      'https://cdn1.suno.ai/hook_5b13e84b-298d-493d-8d04-c68fd7a5b2a7.mp4',
    ],
  },
};

export const LocalFile: Story = {
  render: (args) => <SimpleVideoPlayerTestWithFile {...args} />,
  args: {
    ...eventHandlers,
  },
};

export const LazyLoadMP4: Story = {
  name: 'MP4 (Lazy load)',
  render: (args) => <SimpleVideoPlayerLazyTest {...args} />,
  args: {
    ...eventHandlers,
    url: ['https://cdn1.suno.ai/hook_5b13e84b-298d-493d-8d04-c68fd7a5b2a7.mp4'],
  },
};

export const HlsLazyLoad: Story = {
  name: 'HLS (Lazy load)',
  render: (args) => <SimpleVideoPlayerLazyTest {...args} />,
  args: {
    ...eventHandlers,
    className: 'aspect-16/9 h-120',
    url: ['https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'],
  },
};