import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gap/gap.dart';
import 'package:tanami_app/core/styles/app_color.dart';

import '../../../Portfolio/presentation/bloc/carousel/carousel_bloc.dart';
import '../../../Portfolio/presentation/bloc/carousel/carousel_event.dart';
import '../../../Portfolio/presentation/bloc/carousel/carousel_state.dart';

final List imgList = [
  {'id': 1, 'img_path': 'assets/images/portfolio_screen/detailsbg.png'},
  {'id': 2, 'img_path': 'assets/images/portfolio_screen/detailsbg.png'},
  {'id': 3, 'img_path': 'assets/images/portfolio_screen/detailsbg.png'},
  {'id': 4, 'img_path': 'assets/images/portfolio_screen/detailsbg.png'},
  {'id': 5, 'img_path': 'assets/images/portfolio_screen/detailsbg.png'},
];

class InvestCarouselView extends StatelessWidget {
  final CarouselController _controller = CarouselController();

  InvestCarouselView({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 220.h,
      padding: const EdgeInsets.symmetric(
        horizontal: 15,
        vertical: 15,
      ),
      decoration: BoxDecoration(
          color: AppColor.plainWhite, borderRadius: BorderRadius.circular(20)),
      child: Column(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: CarouselSlider(
              items: imgList
                  .map(
                    (item) => Image.asset(
                      item['img_path'],
                      fit: BoxFit.cover,
                      width: double.infinity,
                      alignment: Alignment.topCenter,
                    ),
                  )
                  .toList(),
              carouselController: _controller,
              options: CarouselOptions(
                  scrollPhysics: const BouncingScrollPhysics(),
                  autoPlay: true,
                  aspectRatio: 2,
                  viewportFraction: 1,
                  onPageChanged: (index, reason) {
                    context.read<CarouselBloc>().add(PageChanged(index));
                  }),
            ),
          ),
          const Gap(6),
          BlocBuilder<CarouselBloc, CarouselState>(
            builder: (context, state) {
              int currentIndex = 0;
              if (state is CarouselPageState) {
                currentIndex = state.currentIndex;
              }
              return Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: imgList.asMap().entries.map((entry) {
                  return GestureDetector(
                    onTap: () => _controller.animateToPage(entry.key),
                    child: Container(
                      width: 20.w,
                      height: 8.h,
                      margin: const EdgeInsets.symmetric(horizontal: 3.0),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: (currentIndex == entry.key)
                            ? AppColor.primaryColor
                            : AppColor.pinFillColor,
                      ),
                    ),
                  );
                }).toList(),
              );
            },
          ),
        ],
      ),
    );
  }
}
