import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/common/custom_dialog.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/routes_const.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.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: [
                            const SizedBox.square(
                              dimension: 40,
                              child: CircleAvatar(
                                backgroundColor: Colors.white,
                                child: SizedBox.square(
                                  dimension: 35,
                                  child: CircleAvatar(
                                    backgroundColor: Colors.grey,
                                    child: FlutterLogo(),
                                  ),
                                ),
                              ),
                            ),
                            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,
                      ),
                      const SizedBox.square(
                        dimension: 40,
                        child: CircleAvatar(
                          backgroundColor: Colors.white,
                          child: SizedBox.square(
                            dimension: 35,
                            child: CircleAvatar(
                              backgroundColor: Colors.grey,
                              child: FlutterLogo(),
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(
                        width: 10,
                      ),
                      if (user != null)
                        Text(
                          '${user.firstName} ${user.lastName}',
                          style: Theme.of(context).textTheme.bodyLarge,
                        ),
                      const SizedBox(
                        width: 10,
                      ),
                      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,
                        ),
                      )
                    ],
                  ),
                ],
              ),
      );
    });
  }
}