import 'package:flutter/material.dart';

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

class MainCharacter {
  final String id;
  final String imageUrl;

  MainCharacter({required this.id, required this.imageUrl});
}

final List<MainCharacter> characterList = [
  MainCharacter(
    id: 'character1',
    imageUrl: 'assets/characters/0character1.png',
  ),
  MainCharacter(
    id: 'character3',
    imageUrl: 'assets/characters/0character3.png',
  ),
  MainCharacter(
    id: 'character4',
    imageUrl: 'assets/characters/0character4.png',
  ),
];

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bug Code Snipet',
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late PageController _carouselController;
  @override
  void initState() {
    _carouselController = PageController(viewportFraction: 0.5, initialPage: 2);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CharacterCarousel(
        carouselController: _carouselController,
      ),
    );
  }
}

///
/// Carousel
///
class CharacterCarousel extends StatefulWidget {
  final PageController carouselController;

  const CharacterCarousel({super.key, required this.carouselController});

  @override
  _CharacterCarouselState createState() => _CharacterCarouselState();
}

class _CharacterCarouselState extends State<CharacterCarousel> {
  late final PageController _controller;

  late final List<String> images;
  @override
  void initState() {
    super.initState();
    images = [
      characterList[characterList.length - 2].imageUrl,
      characterList.last.imageUrl,
      ...characterList.map((character) => character.imageUrl),
      characterList.first.imageUrl,
      characterList[1].imageUrl,
    ];

    _controller = widget.carouselController;

    _controller.addListener(() {
      final page = _controller.page;
      if (!_controller.hasClients || page == null) return;

      if (page >= images.length - 2) {
        Future.microtask(() => _controller.jumpToPage(2));
      } else if (page <= 1) {
        Future.microtask(() => _controller.jumpToPage(images.length - 3));
      }
    });

    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      physics: const ClampingScrollPhysics(),
      controller: _controller,
      itemCount: images.length,
      itemBuilder: (context, index) {
        return SizedBox(
          child: AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              double value = 1.0;
              bool isSelected = false;

              try {
                final page = _controller.hasClients
                    ? (_controller.page ?? _controller.initialPage.toDouble())
                    : _controller.initialPage.toDouble();
                value = (page - index).abs();
                value = (1 - (value * 0.3)).clamp(0.7, 1.0);
                isSelected = page.round() == index;
              } catch (_) {
                value = 1.0;
              }
              return Center(
                child: Transform.scale(
                  scale: value,
                  child: ColorFiltered(
                    colorFilter: isSelected
                        ? const ColorFilter.mode(
                            Colors.transparent,
                            BlendMode.multiply,
                          )
                        : const ColorFilter.matrix(<double>[
                            0.2126,
                            0.7152,
                            0.0722,
                            0,
                            0,
                            0.2126,
                            0.7152,
                            0.0722,
                            0,
                            0,
                            0.2126,
                            0.7152,
                            0.0722,
                            0,
                            0,
                            0,
                            0,
                            0,
                            1,
                            0,
                          ]),
                    child: Opacity(
                      opacity: value,
                      child: Container(
                        margin: const EdgeInsets.symmetric(horizontal: 10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: Image.asset(images[index]),
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
        );
      },
    );
  }
}