import 'dart:async';

import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';
import 'package:provider/provider.dart';
import 'package:badges/badges.dart' as badges;

import 'model/chatList/chatListProps.dart';
import 'view/pages/files/files.dart';
import 'view/pages/more/overhang.dart';
import 'view/pages/talk/chatList.dart';
import 'view/pages/timetable/timetable.dart';

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  int currentPage = 0;
  late Timer refetchChats;
  late Timer updateTimings;

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      Provider.of<ChatListProps>(context, listen: false).run();
    });

    updateTimings = Timer.periodic(const Duration(seconds: 30), (Timer t) => setState((){}));

    refetchChats = Timer.periodic(const Duration(minutes: 1), (timer) {
      if(!context.mounted) return;
      Provider.of<ChatListProps>(context, listen: false).run();
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    PersistentTabController tabController = PersistentTabController(initialIndex: 0);

    return PersistentTabView(
      context,
      controller: tabController,
      navBarStyle: NavBarStyle.style6,
      backgroundColor: Theme.of(context).colorScheme.surface,
      decoration: const NavBarDecoration(
        border: Border.symmetric(vertical: BorderSide.none, horizontal: BorderSide(color: Colors.grey, width: 1))
      ),
      screenTransitionAnimation: const ScreenTransitionAnimation(animateTabTransition: false, curve: Curves.ease, duration: Duration(milliseconds: 200)),
      screens: const [
        Timetable(),
        ChatList(),
        Files([]),
        Overhang(),
      ],
      items: [
        PersistentBottomNavBarItem(
          activeColorPrimary: Theme.of(context).primaryColor,
          inactiveColorPrimary: Theme.of(context).colorScheme.secondary,
          icon: const Icon(Icons.calendar_month),
          title: "Vertretung"
        ),
        PersistentBottomNavBarItem(
          activeColorPrimary: Theme.of(context).primaryColor,
          inactiveColorPrimary: Theme.of(context).colorScheme.secondary,
          icon: Consumer<ChatListProps>(
            builder: (context, value, child) {
              if(value.primaryLoading()) return const Icon(Icons.chat);
              int messages = value.getRoomsResponse.data.map((e) => e.unreadMessages).reduce((a, b) => a+b);
              return badges.Badge(
                showBadge: messages > 0,
                position: badges.BadgePosition.topEnd(top: -3, end: -3),
                stackFit: StackFit.loose,
                badgeStyle: badges.BadgeStyle(
                  padding: const EdgeInsets.all(3),
                  badgeColor: Theme.of(context).primaryColor,
                  elevation: 1,
                ),
                badgeContent: Text("$messages", style: const TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold)),
                child: const Icon(Icons.chat),
              );
            },
          ),
          title: "Talk",
        ),
        PersistentBottomNavBarItem(
          activeColorPrimary: Theme.of(context).primaryColor,
          inactiveColorPrimary: Theme.of(context).colorScheme.secondary,
          icon: const Icon(Icons.folder),
          title: "Dateien"
        ),
        PersistentBottomNavBarItem(
          activeColorPrimary: Theme.of(context).primaryColor,
          inactiveColorPrimary: Theme.of(context).colorScheme.secondary,
          icon: const Icon(Icons.apps),
          title: "Mehr"
        ),
      ],
    );

  }

  @override
  void dispose() {
    refetchChats.cancel();
    updateTimings.cancel();
    super.dispose();
  }
}