import 'package:fis_measure/view/mobile_view/widgets/debounce.dart' as utils;
import 'package:fis_measure/process/workspace/measure_controller.dart';
import 'package:fis_measure/process/workspace/measure_handler.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

class ImagePagination extends StatefulWidget {
  const ImagePagination({super.key, required this.measureController});

  final MeasureController measureController;
  @override
  State<StatefulWidget> createState() {
    return ImagePaginationState();
  }
}

class ImagePaginationState extends State<ImagePagination> {
  late final IMeasureHandler measureHandler = Get.find<IMeasureHandler>();
  int totelCount = 0;
  int currentIndex = 0;

  void preImage() {
    utils.debounce(() {
      if (currentIndex > 0) {
        currentIndex--;
        changeImageByIndex(currentIndex);
        HapticFeedback.mediumImpact();
      }
      setState(() {
        currentIndex = currentIndex;
      });
    }, 'onChangeImage', 600);
  }

  void nextImage() {
    utils.debounce(() {
      if (currentIndex < totelCount - 1) {
        currentIndex++;
        changeImageByIndex(currentIndex);
        HapticFeedback.mediumImpact();
      }
      setState(() {
        currentIndex = currentIndex;
      });
    }, 'onChangeImage', 600);
  }

  void changeImageByIndex(int index) {
    measureHandler.newImageLoading = true;
    widget.measureController.examInfo.selectedImageIndex = index;
  }

  get noNext => currentIndex >= totelCount - 1;
  get noPre => currentIndex <= 0;

  @override
  void initState() {
    super.initState();
    currentIndex = widget.measureController.examInfo.selectedImageIndex;
    totelCount = widget.measureController.examInfo.images.length;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 50,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Opacity(
            opacity: noPre ? 0.2 : 1,
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 5),
              child: ElevatedButton(
                onPressed: noPre ? null : preImage,
                style: ElevatedButton.styleFrom(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 0, vertical: 16),
                  elevation: 0,
                  backgroundColor: Colors.white.withOpacity(0.2),
                ),
                child: const Icon(
                  Icons.keyboard_arrow_up,
                  size: 30,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          const FSizedBox(
            height: 10,
          ),
          Text(
            "${currentIndex + 1}/$totelCount",
            style: const TextStyle(color: Colors.white70, fontSize: 14),
          ),
          const FSizedBox(
            height: 10,
          ),
          Opacity(
            opacity: noNext ? 0.2 : 1,
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 5),
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  // shape: const CircleBorder(),
                  padding:
                      const EdgeInsets.symmetric(horizontal: 0, vertical: 16),
                  elevation: 0,
                  backgroundColor: Colors.white.withOpacity(0.2),
                ),
                onPressed: noNext ? null : nextImage,
                child: const Icon(
                  Icons.keyboard_arrow_down,
                  size: 30,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}