import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:marking_app/common/model/enum/KeyboardType.dart';
import 'package:marking_app/common/model/event_bus/bottom_annotation_switch_cleanall.dart';
import 'package:marking_app/common/model/marking/annotation_graffiti_switch.dart';
import 'package:marking_app/common/model/marking/do_marking_keyboard_model.dart';
import 'package:marking_app/pages/common/event_bus_mixin.dart';
import 'package:marking_app/provider/annotation_graffiti_switch_provider.dart';
import 'package:marking_app/provider/do_marking_provider.dart';
import 'package:marking_app/utils/index.dart';

/**
 * 底部批注开关
 */
class BottomAnnotationSwitch extends StatefulHookConsumerWidget {
  final double? maxWidth;
  final bool homework;
  const BottomAnnotationSwitch({this.maxWidth, this.homework = false, Key? key}) : super(key: key);

  @override
  _BottomAnnotationSwitchState createState() => _BottomAnnotationSwitchState();
}

class _BottomAnnotationSwitchState extends ConsumerState<BottomAnnotationSwitch>
    with SingleTickerProviderStateMixin, EventBusMixin<BottomAnnotationSwitchCleanall> {
  late RemoveListener _annotationsListener; // 批注关闭监听
  late AnimationController _animationController; // 动画
  late AnnotationGraffitiSwitch graffitiSwitch;
  late DoMarkingKeyboardModel _preferenceModel;
  late double upperBound;
  late double lowerBound;
  Color? bgc;
  bool isIos = false;

  @override
  void initState() {
    if (Platform.isIOS) {
      toPrint(val: 'IOS');
      isIos = true;
    } else if (Platform.isAndroid) {
      toPrint(val: '安卓');
    }
    var graffitiHander = ref.read(annotationGraffitiSwitchProvider.notifier);
    if (widget.homework) {
      setTimeOut(500, () {
        graffitiHander.setSwitch(true);
        if (!graffitiHander.state.openBrush) graffitiHander.setSwitchBrush();
      }); // 默认打开可以书写
    }

    _preferenceModel = ref.read(markingKeyboardProvider.notifier).state; // 偏好设置
    bool isVertical = _preferenceModel.screenDirection == ScreenDirection.VERTICAL_SCREEN; // 是否是垂直方向

    switch (_preferenceModel.keyboard) {
      case KeyboardType.RIGHT_SELECTION:
        double isVerticalNumber = 58.w;
        double noVerticalNumber = 28.w;
        if (isIos) {
          noVerticalNumber = 50.w;
        }
        upperBound = ScreenUtil().screenWidth - (isVertical ? isVerticalNumber : noVerticalNumber);
        lowerBound = isVertical ? 34.w : 18.w;
        break;
      case KeyboardType.INPUT_TYPE:
        // 输入型键盘不存在竖屏
        upperBound = ScreenUtil().screenWidth - (isIos ? 115.w : 95.w);
        lowerBound = 18.w;

        break;
      case KeyboardType.BOTTOM_SELECTION:
        upperBound = ScreenUtil().screenWidth;
        lowerBound = isVertical ? 34.w : 18.w;

        break;
    }

    upperBound = widget.maxWidth ?? upperBound;
    _animationController = AnimationController(
      value: graffitiHander.state.annotationSwitch ? upperBound : lowerBound, // 设置默认值
      duration: const Duration(milliseconds: 300),
      lowerBound: lowerBound,
      upperBound: upperBound,
      vsync: this,
    )..addListener(toUp);

    _annotationsListener = graffitiHander.addListener((state) {
      graffitiSwitch = state;
      if (state.annotationSwitch) {
        bgc = const Color.fromRGBO(51, 57, 62, 1);
        // toUp();
        _animationController.forward();
      } else {
        _animationController.reverse();
        setTimeOut(300, () => bgc = null);
      }
    });

    super.initState();
  }

  @override
  void dispose() {
    _annotationsListener();
    _animationController
      ..removeListener(toUp)
      ..dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    ScreenDirection _screenDirection = _preferenceModel.screenDirection;
    bool isVertical = _screenDirection == ScreenDirection.VERTICAL_SCREEN; // 是否是垂直

    // print('当前屏幕情况：${graffitiSwitch.openBrush}');
    // print(isVertical);

    AnnotationGraffitiSwitch _graffitiSwitch = ref.watch(annotationGraffitiSwitchProvider);

    double barrierSize = ScreenUtil().screenWidth / (isVertical ? 20 : 6);
    Color actionColor = Colors.white;
    Color defaultColor = Color.fromRGBO(132, 146, 163, 1);
    return OrientationBuilder(
      builder: (BuildContext context, Orientation orientation) {
        bool isVertical = orientation == Orientation.portrait;

        double iconSize = (isVertical ? 32 : 28).sp;
        return Container(
          height: 52.h,
          // width: widget.homework ? double.infinity : _animationController.value,
          width: _animationController.value,
          color: widget.homework ? Color.fromRGBO(51, 57, 62, 0.2) : bgc,
          padding: EdgeInsets.symmetric(vertical: 1.h),
          child: widget.homework
              ? Row(
                  children: [
                    SizedBox(width: barrierSize + 20.w),
                    InkWell(
                      onTap: () {
                        easyThrottle('setSwitchBrush',
                            () => ref.read(annotationGraffitiSwitchProvider.notifier).setSwitchBrush());
                      },
                      child: Icon(const IconData(0xe623, fontFamily: "AlibabaIcon"),
                          size: iconSize, color: _graffitiSwitch.openBrush ? actionColor : defaultColor),
                    ),
                    SizedBox(width: 24.w),
                    InkWell(
                      onTap: () {
                        eventFire(model: BottomAnnotationSwitchCleanall(previousStep: true));
                      },
                      child: Icon(IconData(0xe61d, fontFamily: "AlibabaIcon"), size: iconSize, color: defaultColor),
                    ),
                    const Expanded(child: SizedBox()),
                    InkWell(
                      onTap: () {
                        easyThrottle('setSwitchMagnifier',
                            () => ref.read(annotationGraffitiSwitchProvider.notifier).setMagnifier());
                      },
                      // IconData(0xe62f, fontFamily: "AlibabaIcon")
                      child: Icon(IconData(0xe634, fontFamily: "AlibabaIcon"),
                          size: iconSize, color: _graffitiSwitch.magnifier ? actionColor : defaultColor),
                    ),
                    SizedBox(width: 24.w),
                    InkWell(
                      onTap: () {
                        eventFire(model: BottomAnnotationSwitchCleanall(cleanAll: true));
                      },
                      child: Icon(IconData(0xe61f, fontFamily: "AlibabaIcon"), size: iconSize, color: defaultColor),
                    ),
                    SizedBox(width: 24.w),
                    InkWell(
                      onTap: () {
                        easyThrottle(
                          'setSwitchMagnifier',
                          () => ref.read(annotationGraffitiSwitchProvider.notifier).setTrajectory(),
                        );
                      },
                      child: Icon(
                        IconData(0xe629, fontFamily: "AlibabaIcon"),
                        size: iconSize,
                        color: _graffitiSwitch.trajectoryDisplay ? actionColor : defaultColor,
                      ),
                    ),
                    SizedBox(width: isIos ? 40.w : 50.w),
                  ],
                )
              : Stack(
                  alignment: const FractionalOffset(0, 0.5),
                  children: [
                    if (bgc != null)
                      Row(
                        children: [
                          SizedBox(width: barrierSize + 20.w),
                          InkWell(
                            onTap: () {
                              easyThrottle('setSwitchBrush',
                                  () => ref.read(annotationGraffitiSwitchProvider.notifier).setSwitchBrush());
                            },
                            child: Icon(const IconData(0xe623, fontFamily: "AlibabaIcon"),
                                size: iconSize, color: _graffitiSwitch.openBrush ? actionColor : defaultColor),
                          ),
                          SizedBox(width: 24.w),
                          InkWell(
                            onTap: () {
                              eventFire(model: BottomAnnotationSwitchCleanall(previousStep: true));
                            },
                            child:
                                Icon(IconData(0xe61d, fontFamily: "AlibabaIcon"), size: iconSize, color: defaultColor),
                          ),

                          // 不需要橡皮擦
                          // InkWell(
                          //   onTap: () {
                          //     easyThrottle(
                          //         'setSwitchEraser', () => ref.read(annotationGraffitiSwitchProvider.notifier).setSwitchEraser());
                          //   },
                          //   child: Icon(const IconData(0xe61c, fontFamily: "AlibabaIcon"),
                          //       color: _graffitiSwitch.openEraser ? Theme.of(context).primaryColor : Colors.white),
                          // ),
                          const Expanded(child: SizedBox()),
                          InkWell(
                            onTap: () {
                              easyThrottle('setSwitchMagnifier',
                                  () => ref.read(annotationGraffitiSwitchProvider.notifier).setMagnifier());
                            },
                            child: Icon(IconData(0xe62f, fontFamily: "AlibabaIcon"),
                                size: iconSize, color: _graffitiSwitch.magnifier ? actionColor : defaultColor),
                          ),
                          SizedBox(width: 24.w),
                          InkWell(
                            onTap: () {
                              eventFire(model: BottomAnnotationSwitchCleanall(cleanAll: true));
                            },
                            child:
                                Icon(IconData(0xe61f, fontFamily: "AlibabaIcon"), size: iconSize, color: defaultColor),
                          ),
                          // SizedBox(width: 24.w),
                          // InkWell(
                          //   onTap: (){
                          //     eventFire(model:BottomAnnotationSwitchCleanall(uploadImage: true));
                          //   },
                          //   child: Column(
                          //     mainAxisAlignment: MainAxisAlignment.center,
                          //     children: [
                          //       Icon(const IconData(0xe614, fontFamily: "AlibabaIcon"), color: Colors.white,size: 22.sp,),
                          //       quickText('提交批注',color: Colors.white,size: 9.sp),
                          //     ],
                          //   )
                          // ),

                          SizedBox(width: isIos ? 40.w : 26.w),
                        ],
                      ),
                    InkWell(
                      onTap: () {
                        easyThrottle('setSwitchMarkingGraffiti', () {
                          if ([upperBound, lowerBound].contains(_animationController.value)) {
                            ref
                                .read(annotationGraffitiSwitchProvider.notifier)
                                .setSwitch(!graffitiSwitch.annotationSwitch);
                          }
                        });
                      },
                      child: Container(
                        // width: isVertical ? 34.w : 16.w,
                        width: barrierSize,
                        padding: EdgeInsets.only(top: 4.h, bottom: 4.h, right: 3.w),
                        alignment: Alignment.centerRight,
                        decoration: BoxDecoration(
                          color: const Color.fromRGBO(253, 147, 21, 1),
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(30.sp),
                            bottomRight: Radius.circular(30.sp),
                          ),
                        ),
                        child: Icon(
                          !graffitiSwitch.annotationSwitch
                              ? const IconData(0xe622, fontFamily: "AlibabaIcon")
                              : const IconData(0xe621, fontFamily: "AlibabaIcon"),
                          color: Colors.white,
                          size: isVertical ? 20.sp : 26.sp,
                        ),
                      ),
                    )
                  ],
                ),
        );
      },
    );
  }

  void toUp() {
    toUpState(setState, () {}, mounted);
  }
}
