import 'package:flutter/material.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../../constants.dart';
import '../../events/eventbus.dart';
import '../../events/events.dart';
import '../../generated/l10n.dart';
import '../../models/ticket.dart';
import '../../routes.dart';
import '../../store/actions.dart';
import '../../store/store.dart';
import '../../utils/http_util.dart';
import '../../utils/utils.dart';
import '../../widgets/general/bottom_nav.dart';
import '../../widgets/general/breadcrumbs.dart';
import '../../widgets/general/double_back_to_close_app_wrapper.dart';
import '../../widgets/general/navigationbar.dart';

class DesktopMySupport extends StatefulWidget {
  final int businessId;
  const DesktopMySupport({Key key, this.businessId}) : super(key: key);

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

}

class DesktopMySupportState extends State<DesktopMySupport> {
  List<Ticket> tickets;

  double division = 3;

  int _page = 1;
  int _pageCount = 1;

  bool _isLoading = false;
  bool _loadingFinish = false;

  RefreshController _refreshController = RefreshController(initialRefresh: true);

  void _onRefresh() {
    _page = 1;
    if (tickets != null) {
      tickets.clear();
    } else {
      tickets = [];
    }
    _refreshController.resetNoData();
    loadTicketes(true);
  }

  void _onLoadMore() {
    // if failed,use loadFailed(),if no data return,use LoadNodata()
    if (_pageCount > _page) {
      _page += 1;
      loadTicketes(false);
    } else {
      _refreshController.loadNoData();
    }
  }

  double sideSpace = 0;
  double mainSpace = 1200;

  @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;
    }

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      if (store.state.user == null) {
        Utils.requireLogin(context, returnUrl: '/my-support/${widget.businessId}');
        return;
      }
    });

    BuildContext mainContext = context;

    return Scaffold(
      appBar: NavigationBar(
        title: S.of(context).my_support,
        back: true,
        breadCrumbs: [
          BreadCrumb(S.of(context).my_support, null),
          BreadCrumb(S.of(context).add_new_ticket,
            '/new-ticket/${widget.businessId}',
            icon: Icons.add,
          ),
        ],
        breadCrumbHeight: Constants.BREADCRUMB_HEIGHT,
      ),
      body: DoubleBackToCloseAppWrapper(
        child: SmartRefresher(
          enablePullDown: true,
          enablePullUp: true,
          header: WaterDropHeader(),
          footer: CustomFooter(
            builder: (BuildContext context, LoadStatus mode){
              Widget footer;
              if(mode == LoadStatus.idle) {
                footer = Text(S.of(context).pull_up_to_load_more);
              } else if (mode == LoadStatus.loading) {
                footer = CircularProgressIndicator();
              } else if (mode == LoadStatus.failed) {
                footer = Text(S.of(context).load_failed_retry);
              } else if (mode == LoadStatus.canLoading) {
                footer = Text(S.of(context).release_to_load_more);
              } else if (mode == LoadStatus.noMore) {
                footer = Text(S.of(context).no_more_record);
              } else {
                footer = Text('...');
              }
              return Container(
                height: 55.0,
                child: Center(child: footer,),
              );
            },
          ),
          controller: _refreshController,
          onRefresh: _onRefresh,
          onLoading: _onLoadMore,
          child: _buildBody(),
        ),
      ),
      bottomNavigationBar: BottomNav(),
    );
  }

  Widget _buildBody() {
    if (tickets == null) {
      return SizedBox.shrink();
    }
    Row row = Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: sideSpace,
        ),
        Container(
          width: mainSpace,
          padding: EdgeInsets.only(
            top: 12.0,
            bottom: 16.0,
            left: 8.0,
            right: 8.0,
          ),
          child: tickets == null ? Text('') :
          (tickets.length > 0 ?
          Wrap(
            children: tickets.map((a) => _getTicket(a)).toList(),
          ) :
          Center(
            child: Text(S.of(context).no_ticket_yet),
          )),
        ),
        Container(
          width: sideSpace,
        ),
      ],
    );
    return SingleChildScrollView(
      child: row,
    );
  }

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

  Widget _getTicket(Ticket ticket) {
    return Container(
      width: (mainSpace - 16.0) / division,
      padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 8.0),
      child: Container(
        padding: EdgeInsets.only(top: 20.0, bottom: 20.0, left: 16.0, right: 16.0,),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Colors.black12,
              width: 0.6,
            ),
            top: BorderSide(
              color: Colors.black12,
              width: 0.6,
            ),
            left: BorderSide(
              color: Colors.black12,
              width: 0.6,
            ),
            right: BorderSide(
              color: Colors.black12,
              width: 0.6,
            ),
          ),
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    child: Text(
                      ticket.issue.msg,
                      style: TextStyle(
                        fontSize: 19.0,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  Container(
                    child: Text(
                      Utils.utcDatetimeStringToLocalDatetimeString(context, ticket.createdAt, withTime: true),
                      style: TextStyle(
                        fontSize: 13.0,
                        color: Colors.grey,
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 10.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        ticket.isClosed ?
                        Container(
                          padding: EdgeInsets.only(right: 10.0),
                          child: Icon(Icons.lock, color: Colors.green, size: 16.0,),
                        ) :
                        SizedBox.shrink(),
                        Expanded(
                          child: Text(
                            S.of(context).followups_token(ticket.followUps.length),
                            style: TextStyle(
                              fontSize: 15.0,
                              color: Colors.black87,
                            ),
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
            Container(
              child: IconButton(
                icon: Icon(
                  Icons.remove_red_eye,
                  color: Colors.grey,
                ),
                onPressed: () {
                  Routes.router.navigateTo(context, '/view-ticket/${ticket.id}');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();

    eventBus.on<OnTicketsUpdated>().listen((event) {
      if (mounted) {
        setState(() {
          tickets = null;
        });
      }
      _refreshController.requestRefresh();
    });
  }

  void loadTicketes(bool isRefresh) {
    HttpUtil.httpGet(
      'v1/mysupport',
      businessId: widget.businessId,
      queryParameters: {
        'page': _page.toString(),
        'size': Constants.TICKET_PER_PAGE_DESKTOP.toString(),
      }
    ).then((value) {
      if (mounted) {
        if (isRefresh) {
          _refreshController.refreshCompleted();
        } else {
          _refreshController.loadComplete();
        }

        if (int.parse(value['_meta']['currentPage'].toString()) >= int.parse(value['_meta']['pageCount'].toString())) {
          _loadingFinish = true;
        }
        if (_loadingFinish) {
          _refreshController.loadNoData();
        }
        _page = int.parse(value['_meta']['currentPage'].toString());
        _pageCount = int.parse(value['_meta']['pageCount'].toString());
        setState(() {
          if (tickets == null) {
            tickets = [];
          }
          tickets.addAll((value['tickets'] as List).map((e) => Ticket.fromJson(e)).toList());
        });
      }
    }).catchError((error) {
      if (mounted) {
        if (isRefresh) {
          _refreshController.refreshFailed();
        } else {
          _refreshController.loadFailed();
        }
        _isLoading = false;
        Utils.showMessageDialog(context, error, onOk: () {
          Navigator.of(context).pop();
          Navigator.of(context).pop();
        });
      }
    });
  }

}