import 'package:carousel/carousel.dart';
import 'package:carousel/models/card_transform.dart';
import 'package:carousel_example/pokemon.dart';
import 'package:carousel_example/pokemon_card.dart';
import 'package:flutter/material.dart';

import 'dart:math' as math;

void main() {
  runApp(const CarouselExampleApp());
}

class CarouselExampleApp extends StatefulWidget {
  const CarouselExampleApp({Key? key}) : super(key: key);

  @override
  State<CarouselExampleApp> createState() => _CarouselExampleAppState();
}

class _CarouselExampleAppState extends State<CarouselExampleApp> {
  Pokemon? selected;

  final List<Pokemon> pokemons = [
    Pokemon(name: 'Bulbasaur', nr: 1, types: ['grass', 'poison']),
    Pokemon(name: 'Charmander', nr: 4, types: ['fire']),
    Pokemon(name: 'Squirtle', nr: 7, types: ['water']),
    Pokemon(name: 'Caterpie', nr: 10, types: ['bug']),
    Pokemon(name: 'Pidgey', nr: 16, types: ['normal', 'flying']),
    Pokemon(name: 'Pikachu', nr: 25, types: ['electric']),
    Pokemon(name: 'Machop', nr: 66, types: ['fighting']),
    Pokemon(name: 'Geodude', nr: 74, types: ['rock', 'ground']),
  ];

  Widget _buildCard(BuildContext context, int index) {
    return PokemonCard(
      pokemon: pokemons[index % pokemons.length],
    );
  }

  void _onClick(int index) {
    setState(() {
      selected = pokemons[index % pokemons.length];
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            SafeArea(
              child: ListView(
                children: [
                  const SizedBox(height: 50),
                  Carousel(
                    pageViewHeight: 220,
                    selectableCardId: 4,
                    onCardClick: _onClick,
                    transforms: [
                      CardTransform(
                          x: 220, y: -85, angle: -math.pi / 12, scale: 0.3),
                      CardTransform(
                          x: 230, y: -80, angle: math.pi / 12, scale: 0.5),
                      CardTransform(
                          x: 200, y: -75, angle: -math.pi / 12, scale: 0.6),
                      CardTransform(
                          x: 110, y: -60, angle: math.pi / 12, scale: 0.7),
                      CardTransform(x: 0, y: 0, angle: 0, scale: 1),
                      CardTransform(
                          x: -270, y: 70, angle: -math.pi / 50, scale: 1),
                    ],
                    builder: _buildCard,
                  ),
                  Carousel(
                    selectableCardId: 1,
                    onCardClick: _onClick,
                    alignment: Alignment.center,
                    transforms: [
                      CardTransform(x: 0, y: 0, angle: 0, scale: 0.5),
                      CardTransform(x: 0, y: 0, angle: 0, scale: 1),
                      CardTransform(
                          x: 300, y: 0, angle: math.pi / 20, scale: 1),
                    ],
                    builder: _buildCard,
                  ),
                ],
              ),
            ),
            if (selected != null)
              Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Text('Clicked: ${selected!.name}'),
              ),
          ],
        ),
      ),
    );
  }
}