part of 'control_board.dart';

class _ProgressBar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ProgressBarState();
}

class _ProgressBarState extends State<_ProgressBar> {
  final playerController = Get.find<IPlayerController>() as VidPlayerController;

  @override
  void initState() {
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      if (mounted) {
        playerController.eventHandler.addListener(onControllerEvent);
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final controller = playerController;
    var index = controller.currentFrameIndex.toDouble();
    var max = 100.0;
    if (index < 0) {
      index = 0;
    } else {
      max = controller.totalFramesCount.toDouble();
    }
    return SliderTheme(
      data: const SliderThemeData(
        trackHeight: 12,
        thumbColor: Colors.white,
        trackShape: _FullWidthTrackShape(),
      ),
      child: LayoutBuilder(builder:
          (BuildContext layoutBuilderContext, BoxConstraints constraints) {
        return Stack(
          alignment: Alignment.center,
          children: [
            Slider(
              max: max,
              value: index,
              onChanged: (v) {
                controller.pause();
                controller.gotoFrame(v.toInt());
              },
            ),
            _PanelPoint(
                max: max,
                index: index,
                constraints: constraints,
                currentIndex: 20,
                onChanged: () {
                  controller.pause();
                  controller.gotoFrame(22);
                }),
            _PanelPoint(
                max: max,
                index: index,
                constraints: constraints,
                currentIndex: 80,
                onChanged: () {
                  controller.pause();
                  controller.gotoFrame(82);
                }),
          ],
        );
      }),
    );
  }

  void onControllerEvent(Object sender, VidPlayerEvent e) {
    if (e is VidPlayerFrameIndexChangeEvent) {
      onPlayFrameIndexChanged(e);
    }
  }

  void onPlayFrameIndexChanged(VidPlayerFrameIndexChangeEvent e) {
    if (mounted) {
      setState(() {});
    }
  }
}

// https://juejin.cn/post/6959703051586240549
class _FullWidthTrackShape extends RoundedRectSliderTrackShape {
  const _FullWidthTrackShape();

  @override
  Rect getPreferredRect({
    required RenderBox parentBox,
    Offset offset = Offset.zero,
    required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    final double trackHeight = sliderTheme.trackHeight ?? 2;
    final double trackLeft = offset.dx;
    final double trackTop =
        offset.dy + (parentBox.size.height - trackHeight) / 2;
    // 让轨道宽度等于 Slider 宽度
    final double trackWidth = parentBox.size.width;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }
}

/// AI节点
class _PanelPoint extends StatefulWidget {
  const _PanelPoint({
    required this.max,
    required this.index,
    required this.constraints,
    required this.currentIndex,
    required this.onChanged,
  });
  final double max;
  final double index;
  final BoxConstraints constraints;
  final double currentIndex;
  final VoidCallback onChanged;

  @override
  State<_PanelPoint> createState() => _PanelPointState();
}

class _PanelPointState extends State<_PanelPoint> {
  Widget marker({
    required double width,
    required Color color,
  }) {
    return InkWell(
      onTap: widget.onChanged,
      child: Container(
        height: 24,
        width: width,
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(24),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: widget.currentIndex / widget.max * widget.constraints.maxWidth,
      child: Tooltip(
        preferBelow: false,
        padding: const EdgeInsets.all(5),
        message: '甲状腺结节',
        child: widget.index > widget.currentIndex
            ? marker(
                width: 24,
                color: Colors.blue,
              )
            : marker(
                width: 24,
                color: Colors.grey,
              ),
      ),
    );
  }
}
