import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
import 'package:syncrow_web/pages/home/bloc/home_state.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
import 'package:syncrow_web/utils/user_drop_down_menu.dart';

class WebAppBar extends StatefulWidget {
  final Widget? title;
  final Widget? centerBody;
  final Widget? rightBody;

  const WebAppBar({super.key, this.title, this.centerBody, this.rightBody});

  @override
  State<WebAppBar> createState() => _WebAppBarState();
}

class _WebAppBarState extends State<WebAppBar> with HelperResponsiveLayout {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    bool isSmallScreen = isSmallScreenSize(context);
    bool isHalfMediumScreen = isHafMediumScreenSize(context);
    return BlocBuilder<HomeBloc, HomeState>(builder: (context, state) {
      final user = context.read<HomeBloc>().user;
      return Container(
        height: (isSmallScreen || isHalfMediumScreen) ? 130 : 100,
        decoration: const BoxDecoration(color: ColorsManager.secondaryColor),
        padding: const EdgeInsets.all(10),
        child: isSmallScreen || isHalfMediumScreen
            ? Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  if (widget.title != null)
                    Align(
                      alignment: Alignment.centerLeft,
                      child: widget.title!,
                    ),
                  if (widget.centerBody != null)
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: widget.centerBody,
                    ),
                  if (widget.rightBody != null || user != null)
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        if (widget.rightBody != null) widget.rightBody!,
                        Row(
                          children: [
                            SizedBox.square(
                              dimension: 40,
                              child: CircleAvatar(
                                backgroundColor: ColorsManager.whiteColors,
                                child: SizedBox.square(
                                  dimension: 35,
                                  child: SvgPicture.asset(
                                    Assets.logoGrey,
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                            ),
                            const SizedBox(
                              width: 10,
                            ),
                            if (user != null)
                              Text(
                                '${user.firstName} ${user.lastName}',
                                style: Theme.of(context).textTheme.bodyLarge,
                              ),
                          ],
                        ),
                      ],
                    ),
                ],
              )
            : Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    child: Row(
                      children: [
                        widget.title!,
                        if (widget.centerBody != null)
                          Padding(
                            padding: const EdgeInsets.only(left: 80),
                            child: widget.centerBody!,
                          ),
                      ],
                    ),
                  ),
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      if (widget.rightBody != null)
                        Align(
                          alignment: Alignment.centerRight,
                          child: widget.rightBody,
                        ),
                      const SizedBox(
                        width: 10,
                      ),
                      SizedBox.square(
                        dimension: 40,
                        child: CircleAvatar(
                          backgroundColor: ColorsManager.whiteColors,
                          child: SizedBox.square(
                            dimension: 35,
                            child: SvgPicture.asset(
                              Assets.logoGrey,
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      if (user != null)
                        Text(
                          '${user.firstName} ${user.lastName}',
                          style: Theme.of(context).textTheme.bodyLarge,
                        ),
                      const SizedBox(
                        width: 10,
                      ),
                      UserDropdownMenu(user: user),
                      // GestureDetector(
                      //   onTap: () {
                      //     showCustomDialog(
                      //       context: context,
                      //       barrierDismissible: true,
                      //       title: 'Logout',
                      //       message: 'Are you sure you want to logout?',
                      //       actions: [
                      //         GestureDetector(
                      //           onTap: () {
                      //             AuthBloc.logout();
                      //             context.go(RoutesConst.auth);
                      //           },
                      //           child: DefaultButton(
                      //             child: Text(
                      //               'Ok',
                      //               style: Theme.of(context)
                      //                   .textTheme
                      //                   .bodyMedium!
                      //                   .copyWith(fontSize: 12, color: Colors.white),
                      //             ),
                      //           ),
                      //         ),
                      //         const SizedBox(
                      //           height: 10,
                      //         ),
                      //         GestureDetector(
                      //           onTap: () {
                      //             context.pop();
                      //           },
                      //           child: DefaultButton(
                      //             child: Text(
                      //               'Cancel',
                      //               style: Theme.of(context)
                      //                   .textTheme
                      //                   .bodyMedium!
                      //                   .copyWith(fontSize: 12, color: Colors.white),
                      //             ),
                      //           ),
                      //         ),
                      //       ],
                      //     );
                      //   },
                      //   child: const Icon(
                      //     Icons.logout,
                      //     color: ColorsManager.whiteColors,
                      //   ),
                      // )
                    ],
                  ),
                ],
              ),
      );
    });
  }
}