import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_load_image.dart';

import '../../router/page/facility_page_router.dart';

@RoutePage()
class FacilityLocationPage extends HookConsumerWidget {
  final List<String> imageUrls;

  const FacilityLocationPage({Key? key, required this.imageUrls}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context, required List<String> imageUrls}) {
    if (context != null) {
      context.router.push(FacilityLocationPageRoute(imageUrls: imageUrls));
    } else {
      appRouter.push(FacilityLocationPageRoute(imageUrls: imageUrls));
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    final currentPage = useState(0); // 记录当前页索引
    final pageController = usePageController(); // 创建 PageController

    // 监听页面变化
    useEffect(() {
      pageController.addListener(() {
        currentPage.value = pageController.page!.round();
      });
      return () => pageController.dispose();
    }, [pageController]);

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "Kids party room",
      ),
      backgroundColor: context.appColors.backgroundWhite,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          children: [
            PageView.builder(
              controller: pageController,
              itemCount: imageUrls.length,
              itemBuilder: (context, index) {
                return MyLoadImage(
                  imageUrls[index],
                  fit: BoxFit.fitWidth,
                );
              },
            ),

            // 底部指示器
            Positioned(
              bottom: 36,
              left: 0,
              right: 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(imageUrls.length, (index) {
                  return Container(
                    margin: const EdgeInsets.symmetric(horizontal: 4),
                    height: 8,
                    width: 8,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: currentPage.value == index ? Colors.blue : Colors.grey,
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}