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 'package:tanami_app/shared/api/api_endpoints.dart';

import '../../../../../Globalconst.dart';
import '../../../../../core/styles/app_images.dart';
import '../../../../../core/styles/app_text.dart';
import '../../../../../core/utils/date_time_formatter/date_time_formatter.dart';
import '../../../../../core/utils/language/localizations_delegate.dart';
import '../../../../../shared/components/text_widget.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';
import '../../domain/model/available_io_model.dart';

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

  InvestCarouselView({super.key, required this.rows});

  @override
  Widget build(BuildContext context) {
    var localizations = AppLocalizations.of(context);
    return Container(
      height: 190.h,
      padding: const EdgeInsets.symmetric(
        horizontal: 15,
        vertical: 15,
      ),
      decoration: BoxDecoration(
          color: AppColor.plainWhite, borderRadius: BorderRadius.circular(20)),
      child: Stack(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: CarouselSlider(
              items: rows.artifactsImage!
                  .map(
                    (item) => Image.network(
                      "${ApiEndpoints.base}${item.artifactPathName!}",
                      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: rows.artifactsImage!.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: 5,
            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().text11W700(
                Globalconst.languageSelected == "ar"
                    ? rows.investmentType!.investmentTypeNameArabic!
                    : rows.investmentType!.investmentTypeName!,
                clr: AppColor.selectedItemColor,
              ),
            ),
          ),
          Positioned(
            top: 20,
            right: 10,
            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().text11W500(
                    '${localizations.translate(AppText.closingDateText)} ${DateTimeFormatter().formatDate(rows.closingDate!)}',
                    clr: AppColor.plainBlack,
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
