import 'package:app_popup_menu/app_popup_menu.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_progress_hud/flutter_progress_hud.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:fluttericon/font_awesome5_icons.dart';
import 'package:multi_dropdown/multiselect_dropdown.dart';
import 'package:unit2/bloc/rbac/rbac_operations/role/role_bloc.dart';
import 'package:unit2/bloc/role_assignment/role_assignment_bloc.dart';
import 'package:unit2/screens/superadmin/role/shared_pop_up_menu.dart';
import 'package:unit2/widgets/Leadings/add_leading.dart';
import 'package:unit2/widgets/error_state.dart';
import '../../../model/rbac/rbac.dart';
import '../../../theme-data.dart/btn-style.dart';
import '../../../theme-data.dart/colors.dart';
import '../../../utils/alerts.dart';
import '../../../utils/global.dart';
import '../../../widgets/empty_data.dart';

class RbacRoleAssignment extends StatelessWidget {
  final int id;
  final String name;
  final String lname;
  const RbacRoleAssignment({super.key, required this.id, required this.lname, required this.name});

  @override
  Widget build(BuildContext context) {
    final formKey = GlobalKey<FormBuilderState>();
    List<RBAC> roles = [];
    List<ValueItem> valueItemRoles = [];
    List<ValueItem> selectedValueItemRoles = [];
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        backgroundColor: primary,
        title: const Text("User Roles Screens"),
        actions: [
          AddLeading(onPressed: () {
            BuildContext parent = context;
            showDialog(
                context: context,
                builder: (BuildContext context) {
                  valueItemRoles = roles.map((e) {
                    return ValueItem(label: e.name!, value: e.name);
                  }).toList();
                  return AlertDialog(
                    title: const Text("Add New Role"),
                    content: FormBuilder(
                      key: formKey,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          MultiSelectDropDown(
                            onOptionSelected:
                                (List<ValueItem> selectedOptions) {
                              selectedValueItemRoles = selectedOptions;
                            },
                            borderColor: Colors.grey,
                            borderWidth: 1,
                            borderRadius: 5,
                            hint: "Select Roles",
                            padding: const EdgeInsets.all(8),
                            options: valueItemRoles,
                            selectionType: SelectionType.multi,
                            chipConfig:
                                const ChipConfig(wrapType: WrapType.wrap),
                            dropdownHeight: 300,
                            optionTextStyle: const TextStyle(fontSize: 16),
                            selectedOptionIcon: const Icon(Icons.check_circle),
                          ),
                          const SizedBox(
                            height: 12,
                          ),
                          SizedBox(
                              width: double.infinity,
                              height: 50,
                              child: ElevatedButton(
                                  style: mainBtnStyle(
                                      primary, Colors.transparent, second),
                                  onPressed: () {
                                    if (formKey.currentState!
                                        .saveAndValidate()) {
                                      List<int> rolesId = [];
                                      for (var role in roles) {
                                        selectedValueItemRoles
                                            .forEach((element) {
                                          if (element.label.toLowerCase() ==
                                              role.name?.toLowerCase()) {
                                            rolesId.add(role.id!);
                                          }
                                        });
                                      }
                                      parent
                                          .read<RoleAssignmentBloc>()
                                          .add(AssignRole(
                                            assignerId: id,
                                            roles: rolesId,
                                          ));
                                      Navigator.pop(context);
                                    }
                                  },
                                  child: const Text("Add"))),
                        ],
                      ),
                    ),
                  );
                });
          })
        ],
      ),
      body: ProgressHUD(
        padding: const EdgeInsets.all(24),
        backgroundColor: Colors.black87,
        indicatorWidget: const SpinKitFadingCircle(color: Colors.white),
        child: BlocConsumer<RoleAssignmentBloc, RoleAssignmentState>(
          listener: (context, state) {
            if (state is RoleAssignmentLoadingState) {
              final progress = ProgressHUD.of(context);
              progress!.showWithText("Please wait...");
            }
            if (state is AssignedRoleLoaded ||
                state is RoleAssignmentErrorState ||
                state is AssignedRoleDeletedState ||
                state is UserNotExistError || state is AssignedRoleAddedState) {
              final progress = ProgressHUD.of(context);
              progress!.dismiss();
            }
            ////Deleted State
            if (state is AssignedRoleDeletedState) {
              if (state.success) {
                successAlert(context, "Delete Successfull!",
                    "Role Module Deleted Successfully", () {
                  Navigator.of(context).pop();
                  context.read<RoleAssignmentBloc>().add(LoadAssignedRole());
                });
              } else {
                errorAlert(
                    context, "Delete Failed", "Role Module Delete Failed", () {
                  Navigator.of(context).pop();
                  context.read<RoleAssignmentBloc>().add(LoadAssignedRole());
                });
              }
            }

                  ////Added State
            if (state is AssignedRoleAddedState) {
              if (state.response['success']) {
                successAlert(
                    context, "Adding Successfull!", state.response['message'],
                    () {
                  Navigator.of(context).pop();
                     context.read<RoleAssignmentBloc>().add(LoadAssignedRole());
                });
              } else {
                errorAlert(context, "Adding Failed", state.response['message'],
                    () {
                  Navigator.of(context).pop();
                 context.read<RoleAssignmentBloc>().add(LoadAssignedRole());
                });
              }
            }
          },
          builder: (context, state) {
            final parent = context;
            if (state is AssignedRoleLoaded) {
            
              roles = state.roles;
              if (state.assignedRoles.isNotEmpty) {
                return Column(
                  children: [
                    ListTile(
                      tileColor: second,
                      leading: const Icon(
                        FontAwesome5.user_alt,
                        color: Colors.white,
                      ),
                      title: Text(state.fullname.toUpperCase(),
                          style: Theme.of(context)
                              .textTheme
                              .titleLarge!
                              .copyWith(color: Colors.white)),
                      subtitle: Text("Person full name",
                          style: Theme.of(context)
                              .textTheme
                              .labelLarge!
                              .copyWith(color: Colors.white)),
                    ),
                    Expanded(
                      child: ListView.builder(
                          padding: const EdgeInsets.symmetric(
                              vertical: 8, horizontal: 10),
                          itemCount: state.assignedRoles.length,
                          itemBuilder: (BuildContext context, int index) {
                            return Column(
                              children: [
                                Container(
                                  width: screenWidth,
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 12, vertical: 8),
                                  child: Row(
                                    children: [
                                      Expanded(
                                          child: Row(
                                        children: [
                                          CircleAvatar(
                                            child: Text('${index + 1}'),
                                          ),
                                          const SizedBox(
                                            width: 12,
                                          ),
                                          Flexible(
                                            child: Text(
                                                state.assignedRoles[index].role!
                                                    .name,
                                                style: Theme.of(context)
                                                    .textTheme
                                                    .titleMedium!
                                                    .copyWith(
                                                        fontWeight:
                                                            FontWeight.w500,
                                                        color: primary)),
                                          ),
                                        ],
                                      )),
                                      AppPopupMenu<int>(
                                        offset: const Offset(-10, -10),
                                        elevation: 3,
                                        onSelected: (value) {
                                          if (value == 1) {
                                            confirmAlert(context, () {
                                              context
                                                  .read<RoleAssignmentBloc>()
                                                  .add(DeleteAssignRole(
                                                      roleId: state
                                                          .assignedRoles[index].id!
                                                         ));
                                            }, "Delete?", "Confirm Delete?");
                                          }
                                        },
                                        menuItems: [
                                          popMenuItem(
                                              text: "Remove",
                                              value: 1,
                                              icon: Icons.delete),
                                        ],
                                        icon: const Icon(
                                          Icons.more_vert,
                                          color: Colors.grey,
                                        ),
                                        tooltip: "Options",
                                      ),
                                    ],
                                  ),
                                ),
                                const Divider(),
                              ],
                            );
                          }),
                    ),
                  ],
                );
              } else {
                return const EmptyData(
                    message: "No Role available. Please click + to add.");
              }
            }
            if (state is RoleAssignmentErrorState) {
              return SomethingWentWrong(
                  message: state.message,
                  onpressed: () {
                    context.read<RoleAssignmentBloc>().add(GetAssignedRoles(firstname: name,lastname: lname));
                  });
            }
            if (state is UserNotExistError) {
              return const Center(
                child: Text("User Not Exsit"),
              );
            }
            return Container();
          },
        ),
      ),
    );
  }
}
