import 'package:carousel_slider/carousel_slider.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:mc_common_app/config/routes.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/models/advertisment_models/ad_details_model.dart';
import 'package:mc_common_app/models/chat_models/chat_message_model.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/navigator.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:sizer/sizer.dart';

class ImagesCorouselWidget extends StatefulWidget {
  final List<GenericImageModel> imagesList;

  const ImagesCorouselWidget({super.key, required this.imagesList});

  @override
  State<StatefulWidget> createState() => _CarouselWithIndicatorState();
}

class _CarouselWithIndicatorState extends State<ImagesCorouselWidget> {
  int _current = 0;
  final CarouselSliderController _controller = CarouselSliderController();

  @override
  Widget build(BuildContext context) {
    if (widget.imagesList.isEmpty) {
      return Center(
        child: SizedBox(
          height: 26.h,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              LocaleKeys.noImagesToShow.tr().toText(
                    fontSize: 12,
                    color: MyColors.lightTextColor,
                    isBold: true,
                  ),
            ],
          ),
        ),
      );
    }
    return SizedBox(
      height: 26.h,
      child: ListView(
        shrinkWrap: true,
        children: [
          CarouselSlider(
            items: widget.imagesList
                .map(
                  (item) => Container(
                    margin: const EdgeInsets.all(5.0),
                    child: ClipRRect(
                      borderRadius: const BorderRadius.all(Radius.circular(5.0)),
                      child: item.imageUrl.buildNetworkImage(),
                    ),
                  ).onPress(() {
                    List<MessageImageModel> images = [];
                    for (var image in widget.imagesList) {
                      images.add(MessageImageModel(
                        id: image.id,
                        isFromNetwork: true,
                        imageUrl: image.imageUrl,
                      ));
                    }
                    navigateWithName(context, AppRoutes.mediaViewerScreen, arguments: images);
                  }),
                )
                .toList(),
            carouselController: _controller,
            options: CarouselOptions(
              autoPlay: false,
              enlargeCenterPage: false,
              aspectRatio: 1.8,
              onPageChanged: (index, reason) {
                setState(() {
                  _current = index;
                });
              },
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: widget.imagesList.asMap().entries.map((entry) {
              return GestureDetector(
                onTap: () => _controller.animateToPage(entry.key),
                child: Container(
                  width: 12.0,
                  height: 12.0,
                  margin: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: _current == entry.key ? MyColors.darkPrimaryColor : MyColors.lightTextColor.withOpacity(0.5),
                  ),
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}
