import 'package:new_recook/utils/headers.dart';

import '../gen/assets.gen.dart';

class OverlayLivingBtnWidget extends StatefulWidget {
  final int index;

  OverlayLivingBtnWidget({Key? key, required this.index,}) : super(key: key);

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

class _OverlayLivingBtnWidgetState extends State<OverlayLivingBtnWidget> with TickerProviderStateMixin{

  double _topPos = 0;
  double _leftPos = 0;
  bool _isMoving = false;
  double _width = 50;
  double get _subWidth => _width / 2;
  double _height = 115;
  double get _subHeight => _height / 2;
  bool _isHide = false;
  int index = 1;///1为首页，2为购物车，3为我的

  @override
  void initState() {
    super.initState();
    _topPos = ScreenUtil().screenHeight - 20 - _height -100;
    _leftPos = _leftPos = 20.w;
    index = widget.index;

    print("_topPos");
    print(_topPos);
    print("_leftPos");
    print(_leftPos);
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedPositioned(
      left: _isHide ? -_width : _leftPos,
      top: _topPos,
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.transparent,width: 2.w),
        ),
        child: Stack(
          children: [
            Positioned(
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
              child: Container(
                  width: 80.w,
                  // /height: 212.w,
                  decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                          color: Color(0xFFDBDBDB),
                          blurRadius: 4,
                          offset: Offset(0, 2),
                        ),
                      ],
                      borderRadius: BorderRadius.all(Radius.circular(14.w)),
                      color: Color(0xB3000000)),
                  child: Column(
                    children: [
                      16.hb,
                      Image.asset(index==1?Assets.icons.tabCar.path: Assets.icons.tabHome.path,width: 45.w,height: 45.w,),
                      8.hb,
                      Text(
                        index==1?'购物车':
                        '商城',
                        style: TextStyle(
                            fontSize: 20.sp, color: Colors.white),
                      ),
                      Divider(thickness: 1.w,color: Colors.white,),

                      Image.asset( index==3?Assets.icons.tabCar.path:Assets.icons.tabMy.path,width: 45.w,height: 45.w,),
                      8.hb,
                      Text(
                        index==3?'购物车':
                        '我的',
                        style: TextStyle(
                            fontSize: 20.sp, color: Colors.white),
                      ),
                    ],
                  ),

              ),

            ),
            GestureDetector(
              onTap:() {

              },
              onPanUpdate: (detail) {
                setState(() {
                  _topPos = detail.globalPosition.dy - _subHeight;
                  _leftPos = detail.globalPosition.dx - _subWidth;
                });
              },
              onPanStart: (detail) {
                setState(() {
                  _isMoving = true;
                });
              },
              onPanEnd: (detail) {
                _isMoving = false;
                if (_leftPos < 20) _leftPos = 20;
                if (_topPos < ScreenUtil().statusBarHeight + 20)
                  _topPos = (20 + ScreenUtil().statusBarHeight);
                if ((_leftPos + _width + 20) > ScreenUtil().screenWidth)
                  _leftPos = ScreenUtil().screenWidth - 20 - _width;
                if ((_topPos + _height + 55 + 20) > ScreenUtil().screenHeight)
                  _topPos = ScreenUtil().screenHeight- 20 - _height - 55;
                setState(() {});
              },
              child: Container(
                height: _height,
                width: _width,
                color: Colors.transparent,
              ),
            ),
          ],
        ),
      ),
      curve: Curves.easeInOutCubic,
      duration: _isMoving ? Duration.zero : Duration(milliseconds: 300),
    );
  }
}