import 'package:flutter/material.dart';
import 'package:flyinsono/lab/color/lab_colors.dart';
import 'package:flyinsono/lab/pages/lab_image/widgets/progress_panel/widgets/frame_indicator.dart';
import 'package:get/get.dart';

import 'index.dart';
import 'widgets/buffer_slider.dart';
import 'widgets/progress_slider.dart';

class ProgressPanel extends GetView<ProgressPanelController> {
  const ProgressPanel({
    Key? key,
    required this.initController,
    required this.tabHashCode,
  }) : super(key: key);

  @override
  String? get tag => tabHashCode;

  final String tabHashCode;

  final ProgressPanelController initController;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ProgressPanelController>(
      init: initController,
      tag: tabHashCode,
      id: ProgressPanelController.progressPanelId,
      builder: (_) {
        if (!controller.enable) {
          return Container();
        }
        return Container(
          height: 50,
          child: Row(
            children: [
              SizedBox(
                width: 10,
              ),
              InkWell(
                onTap: controller.onClickPrevButton,
                child: Container(
                  width: 20,
                  height: 50,
                  child: Icon(
                    Icons.arrow_circle_left_outlined,
                    color: LabColors.white,
                    size: 20,
                  ),
                ),
              ),
              SizedBox(
                width: 10,
              ),
              InkWell(
                onTap: controller.onClickPlayButton,
                child: Obx(
                  () => Icon(
                    controller.isPlaying
                        ? Icons.pause_circle_outline_rounded
                        : Icons.play_circle_outline_rounded,
                    size: 30,
                    color: LabColors.white,
                  ),
                ),
              ),
              SizedBox(
                width: 10,
              ),
              InkWell(
                onTap: controller.onClickNextButton,
                child: Container(
                  width: 20,
                  height: 50,
                  child: Icon(
                    Icons.arrow_circle_right_outlined,
                    color: LabColors.white,
                    size: 20,
                  ),
                ),
              ),
              SizedBox(
                width: 10,
              ),
              Expanded(
                child: Stack(
                  children: [
                    RepaintBoundary(
                      child: Obx(
                        () => BufferSlider(
                          progress: controller.bufferProgress,
                        ),
                      ),
                    ),
                    RepaintBoundary(
                      child: Obx(
                        () => FrameIndicator(
                          totalFrames: controller.totalFrames,
                          startFrame: 0,
                          endFrame: controller.totalFrames - 1,
                          measureKeyFrame: controller.keyFrameSet,
                          horizontalPadding: 10,
                        ),
                      ),
                    ),
                    RepaintBoundary(
                      child: Obx(
                        () {
                          if (controller.totalFrames < 1) {
                            return SizedBox();
                          }
                          return ProgressSlider(
                            min: 0,
                            max: controller.totalFrames - 1,
                            value: controller.currentFrameIndex,
                            onChanged: controller.onProgressChanged,
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: 10,
              ),
              Obx(
                () => Container(
                  width: 100,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        controller.progressStr,
                        style: TextStyle(
                          color: LabColors.text100,
                        ),
                      ),
                      Container(
                        height: 0.5,
                        color: LabColors.base600,
                      ),
                      Text(
                        controller.durationStr,
                        style: TextStyle(
                          color: LabColors.text100,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(
                width: 10,
              ),
            ],
          ),
        );
      },
    );
  }
}
