import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:flutter_wisetronic/widgets/general/breadcrumbs.dart';
import 'package:fluttertoast/fluttertoast.dart';

import '../../constants.dart';
import '../../events/eventbus.dart';
import '../../events/events.dart';
import '../../generated/l10n.dart';
import '../../models/user.dart';
import '../../routes.dart';
import '../../store/actions.dart';
import '../../store/store.dart';
import '../../utils/util_web.dart'
    if (dart.library.io) '../../utils/util_io.dart';
import '../../utils/utils.dart';

MediaQueryData mediaQuery;
double statusBarHeight;
double screenHeight;

class DesktopMe extends StatefulWidget {
  final Key? key;

  const DesktopMe({this.key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return DesktopMeState();
  }
}

class DesktopMeState extends State<DesktopMe> {
  int userId;
  String accessToken;

  bool isLoading;
  User _user;

  double sideSpace = 0;
  double mainSpace = 1200;

  double division = 3;

  @override
  Widget build(BuildContext context) {
    store.dispatch(UpdateContext(context));

    if (MediaQuery.of(context).size.width <= 1200) {
      mainSpace = MediaQuery.of(context).size.width;
      sideSpace = 0;
    } else {
      mainSpace = 1200;
      sideSpace = (MediaQuery.of(context).size.width - 1200) / 2;
    }

    if (isLoading) {
      return new Scaffold(
        body: Center(
          child: SpinKitWave(
            color: Colors.lightBlueAccent,
            size: 40.0,
          ),
        ),
      );
    }

    mediaQuery ??= MediaQuery.of(context);
    screenHeight ??= mediaQuery.size.height;
    statusBarHeight ??= mediaQuery.padding.top;

    Widget userInfo = GestureDetector(
      child: Container(
        padding:
            EdgeInsets.only(left: 16.0, right: 16.0, top: 12.0, bottom: 5.0),
        color: Colors.transparent,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(right: 5.0),
              child: _user != null && _user.avatarUrl.isNotEmpty
                  ? Util.showImage(
                      'https:${_user.avatarUrl}',
                      width: 60,
                      height: 60,
                      fit: BoxFit.fill,
                      errorWidget: (context, url, error) => Icon(
                        Icons.account_circle,
                        size: 60.0,
                        color: Colors.blue,
                      ),
                    )
                  : Icon(
                      Icons.person_outline,
                      size: 60.0,
                      color: Colors.black38,
                    ),
            ),
            Container(
              child: Text(
                _user != null ? _user.nickname : S.of(context).please_login,
                style: TextStyle(
                  color: Colors.black38,
                  fontSize: 18.0,
                ),
              ),
            ),
            Visibility(
              visible: _user != null,
              child: Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      child: Icon(
                        Icons.phone_iphone,
                        color: Colors.blue,
                        size: 20.0,
                      ),
                    ),
                    Container(
                      child: Text(
                        _user != null
                            ? Utils.safePhoneNumber(_user.mobile)
                            : '',
                        style: TextStyle(
                          color: Colors.black38,
                          fontSize: 14.0,
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      onTap: () {
        if (_user != null) {
          Routes.router.navigateTo(context, '/user-profile');
        } else {
          Routes.router.navigateTo(context, '/login');
        }
      },
    );

    Widget widget = SingleChildScrollView(
      child: Column(
        children: [
          Row(
            children: [
              Container(
                width: sideSpace,
              ),
              Container(
                width: mainSpace,
                child: Column(
                  children: [
                    Row(
                      children: [
                        Expanded(
                          child: MouseRegion(
                            cursor: SystemMouseCursors.click,
                            child: userInfo,
                          ),
                        ),
                        Expanded(
                          child: Container(
                            padding: EdgeInsets.only(
                                left: 16.0,
                                right: 16.0,
                                top: 16.0,
                                bottom: 16.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Container(
                                  child: Text(
                                    _user != null
                                        ? '${_user.wallet.toStringAsFixed(2)}'
                                        : '0.00',
                                    style: TextStyle(
                                      fontSize: 24.0,
                                      color: Colors.redAccent,
                                    ),
                                  ),
                                ),
                                Container(
                                  child: Text(
                                    S.of(context).wallet,
                                    style: TextStyle(
                                      fontSize: 12.0,
                                      color: Colors.grey,
                                    ),
                                  ),
                                )
                              ],
                            ),
                            decoration: BoxDecoration(
                              border: Border(
                                bottom: BorderSide(
                                  color: Colors.black12,
                                  width: 6.0,
                                ),
                                right: BorderSide(
                                  color: Colors.black12,
                                  width: 1.0,
                                ),
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                          child: GestureDetector(
                            child: Container(
                              padding: EdgeInsets.only(
                                  left: 16.0,
                                  right: 16.0,
                                  top: 16.0,
                                  bottom: 16.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Container(
                                    child: Text(
                                      _user != null ? '${_user.coupon}' : '0',
                                      style: TextStyle(
                                        fontSize: 24.0,
                                        color: Colors.orangeAccent,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child: Text(
                                      S.of(context).red_coupon,
                                      style: TextStyle(
                                        fontSize: 12.0,
                                        color: Colors.grey,
                                      ),
                                    ),
                                  )
                                ],
                              ),
                              decoration: BoxDecoration(
                                border: Border(
                                  bottom: BorderSide(
                                    color: Colors.black12,
                                    width: 6.0,
                                  ),
                                  right: BorderSide(
                                    color: Colors.black12,
                                    width: 1.0,
                                  ),
                                ),
                              ),
                            ),
                            onTap: () {
                              if (_user != null) {
                                Routes.router.navigateTo(
                                    context, '/coupons/${_user.id}');
                              } else {
                                _pleaseLoginToast();
                              }
                            },
                          ),
                        ),
                        Expanded(
                          child: Container(
                            padding: EdgeInsets.only(
                                left: 16.0,
                                right: 16.0,
                                top: 16.0,
                                bottom: 16.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Container(
                                  child: Text(
                                    _user != null ? '${_user.points}' : '0',
                                    style: TextStyle(
                                      fontSize: 24.0,
                                      color: Colors.lightGreen,
                                    ),
                                  ),
                                ),
                                Container(
                                  child: Text(
                                    S.of(context).point,
                                    style: TextStyle(
                                      fontSize: 12.0,
                                      color: Colors.grey,
                                    ),
                                  ),
                                )
                              ],
                            ),
                            decoration: BoxDecoration(
                              border: Border(
                                bottom: BorderSide(
                                  color: Colors.black12,
                                  width: 6.0,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    Wrap(
                      children: [
                        getLinkItem(
                          mainSpace / division,
                          200.0,
                          Icon(
                            Icons.lock,
                            size: 60.0,
                            color: Colors.lightBlueAccent,
                          ),
                          Text(S.of(context).change_password),
                          () {
                            if (_user != null) {
                              Routes.router.navigateTo(
                                context,
                                '/change-password',
                              );
                            } else {
                              _pleaseLoginToast();
                            }
                          },
                        ),
                        getLinkItem(
                          mainSpace / division,
                          200.0,
                          Icon(
                            Icons.sticky_note_2_outlined,
                            size: 60.0,
                            color: Colors.lightBlueAccent,
                          ),
                          Text(S.of(context).my_orders),
                          () {
                            if (_user != null) {
                              Routes.router.navigateTo(context, '/orders');
                            } else {
                              _pleaseLoginToast();
                            }
                          },
                        ),
                        getLinkItem(
                          mainSpace / division,
                          200.0,
                          Icon(
                            Icons.location_on,
                            size: 60.0,
                            color: Colors.lightBlueAccent,
                          ),
                          Text(S.of(context).my_addresses),
                          () {
                            if (_user != null) {
                              Routes.router
                                  .navigateTo(context, '/my-addresses/-1');
                            } else {
                              _pleaseLoginToast();
                            }
                          },
                        ),
                        getLinkItem(
                          mainSpace / division,
                          200.0,
                          Icon(
                            Icons.credit_card,
                            size: 60.0,
                            color: Colors.lightBlueAccent,
                          ),
                          Text(S.of(context).my_cards),
                          () {
                            if (_user != null) {
                              Routes.router.navigateTo(context, '/my-cards');
                            } else {
                              _pleaseLoginToast();
                            }
                          },
                        ),
                        getLinkItem(
                          mainSpace / division,
                          200.0,
                          Icon(
                            Icons.support_agent,
                            size: 60.0,
                            color: Colors.lightBlueAccent,
                          ),
                          Text(S.of(context).my_support),
                          () {
                            if (_user != null) {
                              Routes.router.navigateTo(context,
                                  '/my-support/${Constants.BUSINESS_ID}');
                            } else {
                              _pleaseLoginToast();
                            }
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              Container(
                width: sideSpace,
              ),
            ],
          ),
        ],
      ),
    );

    return widget;
  }

  @override
  void initState() {
    super.initState();
    setState(() {
      isLoading = true;
      _user = null;
    });

    eventBus.on<OnCurrentUserUpdated>().listen((event) {
      if (mounted) {
        setState(() {
          isLoading = false;
          _user = store.state.user;
        });
      }
    });
    eventBus.on<OnGetCurrentUserFailed>().listen((event) {
      if (mounted) {
        setState(() {
          isLoading = false;
          _user = null;
        });
      }
    });
    Utils.getCurrentUser();
  }

  void _toLogin() {
    Routes.router
        .navigateTo(context, '/login', replace: true, clearStack: true);
  }

  _pleaseLoginToast() {
    Fluttertoast.showToast(
        msg: S.of(context).please_login,
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        backgroundColor: Colors.black54,
        textColor: Colors.white);
  }

  Widget getLinkItem(
      double width, double height, Icon icon, Text label, Function tap) {
    Widget widget = MouseRegion(
      cursor: SystemMouseCursors.click,
      child: GestureDetector(
        child: Container(
          width: width,
          height: height,
          padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 8.0),
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  child: icon,
                ),
                Container(
                  child: label,
                ),
              ],
            ),
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              border: new Border.all(
                color: Colors.black12,
                width: 1.0,
              ),
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
            ),
          ),
        ),
        onTap: tap,
      ),
    );
    return widget;
  }
}
