import 'package:flutter/material.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/professional_provider.dart';
import 'package:prosapp_web_app/providers/score_provider.dart';

import 'package:prosapp_web_app/providers/sidemenu_provider.dart';

import 'package:prosapp_web_app/ui/shared/widgets/navbar_avatar.dart';
import 'package:provider/provider.dart';

class Navbar extends StatelessWidget {
  const Navbar({super.key});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    final professionalProvider = Provider.of<ProfessionalProvider>(context);
    final scoreProvider = Provider.of<ScoreProvider>(context, listen: false);

    WidgetsBinding.instance.addPostFrameCallback((_) {
      scoreProvider.loadReputation(context.read<AuthProvider>().user!.id);
    });

    return Consumer<ScoreProvider>(builder: (context, scoreProvider, child) {
      final reputation = scoreProvider.reputation;

      return Container(
        width: double.infinity,
        height: 50,
        decoration: buildBoxDecoration(),
        child: Row(
          children: [
            if (size.width <= 700) ...[
              IconButton(
                icon: const Icon(Icons.menu_outlined),
                onPressed: () => SideMenuProvider.openMenu(),
              ),
            ],
            const SizedBox(width: 5),
            const Spacer(),
            Row(
              children: [
                Icon(Icons.star, color: Colors.yellow[600], size: 15),
                const SizedBox(width: 2),
                Text(
                  professionalProvider.isProModeActive
                      ? reputation.averagePro.toStringAsFixed(2)
                      : reputation.average.toStringAsFixed(2),
                  style: const TextStyle(fontSize: 15),
                ),
              ],
            ),
            const SizedBox(width: 10),
            const NavbarAvatar(),
            const SizedBox(width: 10),
          ],
        ),
      );
    });
  }

  BoxDecoration buildBoxDecoration() {
    return const BoxDecoration(color: Colors.white, boxShadow: [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 5,
      ),
    ]);
  }
}