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

export default defineStory({
  title: 'Tools/Lottie Player',
  component: LottiePlayer,
  description: 'Lottie animation player for JSON animations.',
});

// Public Lottie animation URLs
const ANIMATIONS = {
  loading: 'https://assets2.lottiefiles.com/packages/lf20_usmfx6bp.json',
  success: 'https://assets4.lottiefiles.com/packages/lf20_jbrw3hcz.json',
  rocket: 'https://assets3.lottiefiles.com/packages/lf20_l3qxn9jy.json',
  heart: 'https://assets7.lottiefiles.com/packages/lf20_3vbOcw.json',
};

export const Interactive = () => {
  const [animation] = useSelect('animation', {
    options: ['loading', 'success', 'rocket', 'heart'] as const,
    defaultValue: 'rocket',
    label: 'Animation',
    description: 'Select Lottie animation',
  });

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

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

  const [controls] = useBoolean('controls', {
    defaultValue: false,
    label: 'Show Controls',
    description: 'Display playback controls',
  });

  return (
    <div className="w-64 h-64">
      <LottiePlayer
        src={ANIMATIONS[animation]}
        loop={loop}
        autoplay={autoplay}
        controls={controls}
      />
    </div>
  );
};

export const Loading = () => (
  <div className="w-48 h-48">
    <LottiePlayer src={ANIMATIONS.loading} loop autoplay />
  </div>
);

export const Success = () => (
  <div className="w-48 h-48">
    <LottiePlayer src={ANIMATIONS.success} autoplay />
  </div>
);

export const Rocket = () => (
  <div className="w-64 h-64">
    <LottiePlayer src={ANIMATIONS.rocket} loop autoplay />
  </div>
);

export const Heart = () => (
  <div className="w-32 h-32">
    <LottiePlayer src={ANIMATIONS.heart} loop autoplay />
  </div>
);

export const WithControls = () => (
  <div className="w-64 h-64">
    <LottiePlayer
      src={ANIMATIONS.rocket}
      loop
      autoplay
      controls
    />
  </div>
);

export const Paused = () => (
  <div className="w-48 h-48">
    <LottiePlayer src={ANIMATIONS.loading} loop />
  </div>
);
