import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:skripsi_getit/data/state/movie_state.dart';
import 'package:skripsi_getit/services/cubit/popular_movie_cubit.dart';
import 'package:skripsi_getit/themes/colors.dart';
import 'package:skripsi_getit/themes/fonts.dart';

class PopularBulkViewBloc extends StatefulWidget {
  const PopularBulkViewBloc({super.key});

  @override
  State<PopularBulkViewBloc> createState() => _PopularBulkViewBlocState();
}

class _PopularBulkViewBlocState extends State<PopularBulkViewBloc> {
  final ScrollController _scrollController = ScrollController();
  bool isAtBottom = false;

  @override
  void initState() {
    super.initState();

    _scrollController.addListener(() {
      setState(() {
        isAtBottom =
            _scrollController.offset >=
            _scrollController.position.maxScrollExtent;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    final cubit = context.read<PopularMovieCubit>();

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        title: Text(
          "Popular Movie",
          style: AppFonts.montserrat(
            fontSize: 16,
            color: whiteColor,
            fontWeight: FontWeight.bold,
          ),
        ),
        leading: IconButton(
          onPressed: () {
            Navigator.pop(context);
          },
          icon: Icon(Icons.keyboard_arrow_left_rounded, color: whiteColor),
        ),
      ),
      backgroundColor: primaryColor,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (isAtBottom) {
            _scrollController.animateTo(
              0,
              duration: const Duration(milliseconds: 500),
              curve: Curves.easeOut,
            );
          } else {
            _scrollController.animateTo(
              _scrollController.position.maxScrollExtent,
              duration: const Duration(milliseconds: 500),
              curve: Curves.easeOut,
            );
          }
        },
        child: Icon(isAtBottom ? Icons.arrow_upward : Icons.arrow_downward),
      ),
      body: BlocBuilder<PopularMovieCubit, MovieState>(
        builder: (context, state) {
          return Column(
            children: [
              const SizedBox(height: 12),
              Wrap(
                spacing: 8,
                children:
                    [50, 100, 250, 500].map((count) {
                      return ElevatedButton(
                        onPressed:
                            state.isLoading
                                ? null
                                : () async {
                                  cubit.reset();
                                  await cubit.fetchPopularMoviesInBulk(count);
                                },
                        child: Text("Load $count"),
                      );
                    }).toList(),
              ),
              const SizedBox(height: 12),
              if (state.isLoading)
                const CircularProgressIndicator()
              else if (state.movies.isEmpty)
                const Text("No Data")
              else
                Expanded(
                  child: ListView.builder(
                    controller: _scrollController,
                    itemCount: state.movies.length,
                    itemBuilder: (context, index) {
                      final movie = state.movies[index];
                      return ListTile(
                        leading: Text(
                          '${index + 1}.',
                          style: AppFonts.montserrat(
                            fontSize: 12,
                            color: whiteColor,
                          ),
                        ),
                        title: Text(
                          movie.title ?? '',
                          style: AppFonts.montserrat(
                            fontSize: 14,
                            color: whiteColor,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        subtitle: Text(
                          movie.releaseDate ?? '',
                          style: AppFonts.montserrat(
                            fontSize: 12,
                            color: whiteColor,
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                        trailing:
                            movie.posterPath != null
                                ? Image.network(
                                  "https://image.tmdb.org/t/p/w92${movie.posterPath}",
                                  width: 50,
                                )
                                : null,
                      );
                    },
                  ),
                ),
            ],
          );
        },
      ),
    );
  }
}