import 'package:bookmywages/consts_widgets/app_colors.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:get/get.dart';

class ImagePage extends StatefulWidget {
  final List<String> mediaUrls;

  const ImagePage({super.key, required this.mediaUrls});

  @override
  State<ImagePage> createState() => _ImagePageState();
}

class _ImagePageState extends State<ImagePage> {
  int selectedImageIndex = 0; // Track the currently selected image

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.secondprimary,
      appBar: AppBar(
        backgroundColor: AppColors.secondprimary,
        leading: IconButton(
          onPressed: () => Get.back(),
          icon: Icon(Icons.arrow_back_ios_outlined),
        ),
        title: Text("Service Image"),
        centerTitle: true,
      ),
      body: Column(
        children: [
          SizedBox(height: 50),
          Center(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(
                22.94,
              ), // Set border-radius to 22.94
              child: CachedNetworkImage(
                imageUrl: widget.mediaUrls.isNotEmpty
                    ? widget.mediaUrls[selectedImageIndex] // Use selected index
                    : '',
                width: 250, // Set width to 250
                height: 250, // Set height to 250
                fit: BoxFit.cover,
                placeholder: (context, url) => const Center(
                  child: SizedBox(
                    width: 30,
                    height: 30,
                    child: CircularProgressIndicator(strokeWidth: 2),
                  ),
                ),
                errorWidget: (context, url, error) => const Icon(Icons.error),
              ),
            ),
          ),
          SizedBox(height: 20),
          CarouselSlider(
            options: CarouselOptions(
              height: 150, // Set height of the carousel
              enlargeCenterPage: true,
              enableInfiniteScroll: false,
              viewportFraction: 0.3,
              aspectRatio: 1.0,
            ),
            items: widget.mediaUrls.asMap().entries.map((entry) {
              int index = entry.key;
              String url = entry.value;
              bool isSelected = index == selectedImageIndex;

              return GestureDetector(
                onTap: () {
                  setState(() {
                    selectedImageIndex = index; // Update selected image
                  });
                },
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(22.94),
                    border: isSelected
                        ? Border.all(
                            color: Colors.blue,
                            width: 3,
                          ) // Highlight selected image
                        : null,
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(
                      22.94,
                    ), // Set border-radius to 22.94
                    child: CachedNetworkImage(
                      imageUrl: url,
                      width: 176, // Set width to 176
                      height: 158, // Set height to 158
                      fit: BoxFit.cover,
                      placeholder: (context, url) => const Center(
                        child: SizedBox(
                          width: 30,
                          height: 30,
                          child: CircularProgressIndicator(strokeWidth: 2),
                        ),
                      ),
                      errorWidget: (context, url, error) =>
                          const Icon(Icons.error),
                    ),
                  ),
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}