import 'package:badges/badges.dart';
import 'package:farm_tpf/custom_model/NotificationObjectDTO.dart';
import 'package:farm_tpf/presentation/screens/account/sc_account.dart';
import 'package:farm_tpf/presentation/screens/control_device/sc_control_device.dart';
import 'package:farm_tpf/presentation/screens/notification/sc_notification.dart';
import 'package:farm_tpf/presentation/screens/notification/update_count_noti_bloc.dart';
import 'package:farm_tpf/presentation/screens/plot/sc_plot.dart';
import 'package:farm_tpf/utils/const_color.dart';
import 'package:farm_tpf/utils/const_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';

import '../../../main.dart';

class TabbarScreen extends StatefulWidget {
  static Route route() {
    return MaterialPageRoute<void>(builder: (_) => TabbarScreen());
  }

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

class _TabbarScreenState extends State<TabbarScreen> {
  final changeTabbar = Get.put(TabbarSelected());
  List<TabbarItem> itemsTabbar = [
    TabbarItem(
        icon: AppIcons.icPlot, title: 'Lô trồng', index: TabBarIndex.plot),
    TabbarItem(
        icon: AppIcons.icDevice, title: 'Thiết bị', index: TabBarIndex.device),
    TabbarItem(icon: AppIcons.icQr, title: 'Quét QR', index: TabBarIndex.qr),
    TabbarItem(
        icon: AppIcons.icNotification,
        title: 'Thông báo',
        index: TabBarIndex.notification),
    TabbarItem(
        icon: AppIcons.icPerson, title: 'Cá nhân', index: TabBarIndex.account)
  ];

  @override
  void initState() {
    super.initState();
    changeTabbar.initValue();
    updateCountNotiBloc.getNotifications((data) {}, (err) {});
  }

  Widget textCountNoti() {
    return StreamBuilder(
      stream: updateCountNotiBloc.actions,
      builder: (context, AsyncSnapshot<dynamic> snapshot) {
        if (snapshot.hasData) {
          var noti = snapshot.data as NotificationObjectDTO;
          var unreadNoti =
              noti.numberUnreadTotal > 99 ? '99+' : '${noti.numberUnreadTotal}';
          return Text(
            '$unreadNoti',
            softWrap: true,
            style: TextStyle(color: Colors.white, fontSize: 10),
          );
        } else {
          return Text(
            'O',
            softWrap: true,
            style: TextStyle(color: Colors.white, fontSize: 10),
          );
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        child: SafeArea(
            top: false,
            bottom: true,
            child: Scaffold(
              body: GetBuilder<TabbarSelected>(builder: (tabbarSelected) {
                switch (tabbarSelected.index) {
                  case TabBarIndex.plot:
                    return PlotListScreen();
                    break;
                  case TabBarIndex.device:
                    return ControlDeviceScreen();
                    break;
                  case TabBarIndex.qr:
                    break;
                  case TabBarIndex.notification:
                    return NotificationScreen();
                    break;
                  case TabBarIndex.account:
                    return AccountScreen();
                    break;
                  default:
                    return PlotListScreen();
                }
              }),
              bottomNavigationBar: Container(
                  padding: EdgeInsets.all(4),
                  height: 70,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border(
                          top: BorderSide(color: Colors.grey, width: 0.35))),
                  child: GetBuilder<TabbarSelected>(builder: (tabbarSelected) {
                    return Center(
                      child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          shrinkWrap: true,
                          physics: NeverScrollableScrollPhysics(),
                          itemCount: itemsTabbar.length,
                          itemBuilder: (context, index) {
                            return GestureDetector(
                              child: Container(
                                  width: (Get.width - 20) / 5,
                                  margin: EdgeInsets.all(1),
                                  padding: EdgeInsets.all(10),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      index == 3
                                          ? Badge(
                                              badgeContent: textCountNoti(),
                                              shape: BadgeShape.circle,
                                              badgeColor: Colors.red,
                                              position: BadgePosition(
                                                  top: -15, start: 10),
                                              child: SvgPicture.asset(
                                                itemsTabbar[index].icon,
                                                width: 24,
                                                height: 24,
                                                color: (tabbarSelected.index ==
                                                        itemsTabbar[index]
                                                            .index)
                                                    ? AppColors.YELLOW
                                                    : AppColors.GRAY1,
                                              ),
                                            )
                                          : SvgPicture.asset(
                                              itemsTabbar[index].icon,
                                              width: 24,
                                              height: 24,
                                              color: (tabbarSelected.index ==
                                                      itemsTabbar[index].index)
                                                  ? AppColors.YELLOW
                                                  : AppColors.GRAY1,
                                            ),
                                      Flexible(
                                        child: Text(
                                          itemsTabbar[index].title,
                                          style: TextStyle(
                                              color: (tabbarSelected.index ==
                                                      itemsTabbar[index].index)
                                                  ? AppColors.DEFAULT
                                                  : Colors.grey,
                                              fontSize: 10),
                                        ),
                                      )
                                    ],
                                  )),
                              onTap: () {
                                //Open scan qr code when tap icon in tabbar
                                if (index == 2) {
                                  changeTabbar.changeIndex(changeTabbar.index);
                                  scan(context);
                                } else {
                                  changeTabbar
                                      .changeIndex(itemsTabbar[index].index);
                                }
                              },
                            );
                          }),
                    );
                  })),
            )));
  }
}

class TabbarSelected extends GetxController {
  TabBarIndex index;
  void initValue() {
    index = TabBarIndex.plot;
    update();
  }

  void changeIndex(TabBarIndex changedIndex) {
    index = changedIndex;
    update();
  }
}

enum TabBarIndex { plot, device, qr, notification, account }

class TabbarItem {
  TabBarIndex index;
  String icon;
  String title;
  TabbarItem({this.icon, this.title, this.index});
}