import 'dart:async';

import 'package:flutter/material.dart';
import 'package:marianum_mobile/data/chatList/chatListProps.dart';
import 'package:marianum_mobile/screen/pages/timetable/timetable.dart';
import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';
import 'package:provider/provider.dart';
import 'screen/pages/files/files.dart';
import 'screen/pages/more/overhang.dart';
import 'screen/pages/talk/chatList.dart';

import 'package:badges/badges.dart' as badges;

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

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

class _AppState extends State<App> {
  int currentPage = 0;

  @override
  void initState() {
    Timer.periodic(const Duration(seconds: 30), (Timer t) => setState((){}));

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      Provider.of<ChatListProps>(context, listen: false).run();
    });
    Timer.periodic(const Duration(minutes: 1), (timer) {
      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.onSecondary,
      decoration: const NavBarDecoration(
        border: Border.symmetric(vertical: BorderSide.none, horizontal: BorderSide(color: Colors.grey, width: 1))
      ),
      screenTransitionAnimation: const ScreenTransitionAnimation(animateTabTransition: true, 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: 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"
        ),
      ],
    );

  }
}