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

import '../bloc/carousel/carousel_bloc.dart';
import '../bloc/carousel/carousel_event.dart';
import '../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 CarouselView extends StatelessWidget {
  final CarouselController _controller = CarouselController();

  CarouselView({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 190.h,
      decoration: const BoxDecoration(
        color: AppColor.portfolioCardBgColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0),
        ),
      ),
      child: Stack(
        children: [
          ClipRRect(
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(20.0),
              topRight: Radius.circular(20.0),
            ),
            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));
                  }),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.only(bottom: 17.0),
              child: 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: 7.h,
                          margin: const EdgeInsets.symmetric(horizontal: 3.0),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: (currentIndex == entry.key)
                                ? AppColor.plainWhite
                                : AppColor.smokeGrayColor,
                          ),
                        ),
                      );
                    }).toList(),
                  );
                },
              ),
            ),
          ),
          Positioned(
            top: 20,
            left: 20,
            child: Container(
              padding:
                  const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
              decoration: BoxDecoration(
                color: const Color(0xFFE4F5E9),
                borderRadius: BorderRadius.circular(30.0),
              ),
              child: TextWidget().text12W700(
                'Asset Class',
                clr: AppColor.selectedItemColor,
              ),
            ),
          ),
          Positioned(
            top: 20,
            right: 20,
            child: Container(
              padding:
                  const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(30.0),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Image.asset(
                    AppImages.portfolioClock,
                    height: 15.h,
                  ),
                  Gap(
                    5.w,
                  ),
                  TextWidget().text12W500(
                    'Jul 10 2025',
                    clr: AppColor.plainBlack,
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
