car_common_app/lib/widgets/image_viewer/image_viewer_screen.dart

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:mc_common_app/generated/locale_keys.g.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/widgets/common_widgets/app_bar.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';

class MediaViewerScreen extends StatefulWidget {
  final List<MessageImageModel> images; // List of image URLs or file paths

  const MediaViewerScreen({Key? key, required this.images}) : super(key: key);

  @override
  MediaViewerScreenState createState() => MediaViewerScreenState();
}

class MediaViewerScreenState extends State<MediaViewerScreen> {
  int selectedIndex = 0; // Track selected image index

  PageController pageController = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(title: LocaleKeys.pictures.tr()),
      body: Column(
        children: [
          // Main Image Display in PageView
          Expanded(
            child: PageView.builder(
              itemCount: widget.images.length,
              controller: pageController,
              onPageChanged: (index) {
                setState(() {
                  selectedIndex = index; // Update the selected index to reflect the current page
                });

                // Use proper duration and curve
                pageController.animateToPage(
                  index,
                  duration: const Duration(milliseconds: 500), // Correct duration in milliseconds
                  curve: Curves.easeInOut, // Smooth easing curve
                );
              },
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Center(
                    child: InteractiveViewer(
                      panEnabled: true,
                      scaleEnabled: true,
                      minScale: 1.0,
                      maxScale: 4.0,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(16),
                        child: (widget.images[index].isFromNetwork ?? false)
                            ? widget.images[index].imageUrl.buildNetworkImage(
                                fit: BoxFit.cover,
                                width: double.infinity,
                                height: double.infinity,
                              )
                            : widget.images[index].imagePath.buildFileImage(
                                fit: BoxFit.cover,
                                width: double.infinity,
                                height: double.infinity,
                              ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          // Thumbnail List at the bottom
          Container(
            height: 100, // Set height for thumbnail list
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: widget.images.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedIndex = index; // Update the selected index to reflect the current page
                    });

                    // Use proper duration and curve
                    pageController.animateToPage(
                      index,
                      duration: const Duration(milliseconds: 100), // Correct duration in milliseconds
                      curve: Curves.easeInOut, // Smooth easing curve
                    );
                  },
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Container(
                      width: 80, // Thumbnail size
                      height: 80,
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: selectedIndex == index ? MyColors.darkPrimaryColor : MyColors.greyShadowColor, // Highlight selected image
                          width: selectedIndex == index ? 2 : 1,
                        ),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: (widget.images[index].isFromNetwork ?? false)
                            ? widget.images[index].imageUrl.buildNetworkImage(
                                fit: BoxFit.cover,
                                width: double.infinity,
                                height: double.infinity,
                              )
                            : widget.images[index].imagePath.buildFileImage(
                                fit: BoxFit.cover,
                                width: double.infinity,
                                height: double.infinity,
                              ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}