import 'package:flutter/material.dart';
import 'package:dotlottie_flutter/dotlottie_flutter.dart';

class AnimationControlsPage extends StatefulWidget {
  @override
  State<AnimationControlsPage> createState() => _AnimationControlsPageState();
}

class _AnimationControlsPageState extends State<AnimationControlsPage> {
  DotLottieViewController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('dotLottie Controls')),
      body: Column(
        children: [
          DotLottieView(
            source: 'https://lottie.host/example/animation.lottie',
            sourceType: 'url',
            loop: true,
            onViewCreated: (c) => setState(() => _controller = c),
            onLoad: () => print('Loaded'),
            onComplete: () => print('Complete'),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                icon: const Icon(Icons.play_arrow),
                onPressed: () => _controller?.play(),
              ),
              IconButton(
                icon: const Icon(Icons.pause),
                onPressed: () => _controller?.pause(),
              ),
              IconButton(
                icon: const Icon(Icons.stop),
                onPressed: () => _controller?.stop(),
              ),
            ],
          ),
          ElevatedButton(
            onPressed: () => _controller?.setSpeed(2.0),
            child: const Text('2x Speed'),
          ),
          ElevatedButton(
            onPressed: () => _controller?.setMode('bounce'),
            child: const Text('Bounce Mode'),
          ),
        ],
      ),
    );
  }
}

DotLottieView(
  source: 'assets/themed_animation.lottie',
  sourceType: 'asset',
  autoplay: true,
  loop: true,
  themeId: 'dark-mode',
  onViewCreated: (controller) async {
    // Switch themes after 3 seconds
    await Future.delayed(const Duration(seconds: 3));
    await controller.setTheme('light-mode');
  },
)

DotLottieView(
  source: 'assets/animation.lottie',
  sourceType: 'asset',
  autoplay: true,
  loop: true,
  segment: [10, 60],  // Play frames 10 through 60
)

DotLottieView(
  source: 'assets/animation.lottie',
  sourceType: 'asset',
  autoplay: true,
  loop: false,
  marker: 'intro',
  onComplete: () => print('Intro marker finished'),
)

DotLottieView(
  source: 'assets/branded_animation.lottie',
  sourceType: 'asset',
  autoplay: true,
  loop: true,
  onViewCreated: (controller) async {
    // Update brand color and headline text via JSON string
    await controller.setSlots(
      '{"primaryColor": [1.0, 0.0, 0.0, 1.0], "headlineText": {"t": "Hello Flutter!"}}'
    );
  },
)

class InteractiveAnimation extends StatefulWidget {
  @override
  State<InteractiveAnimation> createState() => _InteractiveAnimationState();
}

class _InteractiveAnimationState extends State<InteractiveAnimation> {
  DotLottieViewController? _controller;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        DotLottieView(
          source: 'assets/interactive.lottie',
          sourceType: 'asset',
          stateMachineId: 'buttonFSM',
          onViewCreated: (c) => setState(() => _controller = c),
          stateMachineOnStateEntered: (state) {
            print('Entered state: $state');
          },
          stateMachineOnTransition: (from, to) {
            print('Transition: $from -> $to');
          },
        ),
        ElevatedButton(
          onPressed: () async {
            await _controller?.stateMachineFire('click');
          },
          child: const Text('Trigger Click'),
        ),
        ElevatedButton(
          onPressed: () async {
            await _controller?.stateMachineSetBooleanInput('isActive', true);
          },
          child: const Text('Set isActive = true'),
        ),
      ],
    );
  }
}

DotLottieView(
  source: 'assets/multi.lottie',
  sourceType: 'asset',
  animationId: 'scene-2',
  autoplay: true,
  loop: true,
  onViewCreated: (controller) async {
    // Switch to another animation after 5 seconds
    await Future.delayed(const Duration(seconds: 5));
    await controller.loadAnimation('scene-3');
  },
)