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:form_builder_validators/form_builder_validators.dart';
import 'package:multi_dropdown/models/value_item.dart';
import 'package:multi_dropdown/multiselect_dropdown.dart';
import 'package:unit2/bloc/rbac/rbac_operations/role/role_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 '../../../../bloc/role/pass_check/est_point_person/est_point_person_assignable/est_point_person_assinable_role_bloc.dart';
import '../../../../model/rbac/rbac.dart';
import '../../../../theme-data.dart/box_shadow.dart';
import '../../../../theme-data.dart/btn-style.dart';
import '../../../../theme-data.dart/colors.dart';
import '../../../../theme-data.dart/form-style.dart';
import '../../../../utils/alerts.dart';
import '../../../../utils/global.dart';
import '../../../../widgets/empty_data.dart';

class EstPointPersonRoleUnderScreen extends StatelessWidget {
  final int id;
  const EstPointPersonRoleUnderScreen({super.key, required this.id});

  @override
  Widget build(BuildContext context) {
    final formKey = GlobalKey<FormBuilderState>();
    List<RBAC> roles = [];
        List<ValueItem> valueItemRoles = [];
    List<ValueItem> selectedValueItemRoles = [];
    RBAC? mainRole;
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: primary,
        title: const Text("Establishment Point Person Role Under Screen"),
        actions: [
          AddLeading(onPressed: () {
                 valueItemRoles = roles.map((e) {
                    return ValueItem(label: e.name!, value: e.name);
                  }).toList();
            BuildContext parent = context;
            showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: const Text("Add New Role"),
                    content: FormBuilder(
                      key: formKey,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                        FormBuilderDropdown(
                          decoration: normalTextFieldStyle("", ""),
                          initialValue: mainRole!.name,
                          name: "main-role",items:[] ,),
                          const SizedBox(height: 12,),
                              MultiSelectDropDown(
                              onOptionSelected:
                                  (List<ValueItem> selectedOptions) {
                                selectedValueItemRoles = selectedOptions;
                              },
                              borderColor: Colors.grey,
                              borderWidth: 1,
                              borderRadius: 5,
                              hint: "Roles Under",
                              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: 8,
                          ),
                        
                          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!);
                                          }
                                        });
                                      }
                                      Navigator.pop(context);
                                         parent.read<EstPointPersonAssinableRoleBloc>().add(
                                          AddEstPointPersonAssignableRoles(
                                          mainRoleId: mainRole!.id!,
                                              rolesUnder: rolesId));
                                    }
                                  },
                                  child: const Text("Add"))),
                        ],
                      ),
                    ),
                  );
                });
          })
        ],
      ),
      body: ProgressHUD(
        padding: const EdgeInsets.all(24),
        backgroundColor: Colors.black87,
        indicatorWidget: const SpinKitFadingCircle(color: Colors.white),
        child: BlocConsumer<EstPointPersonAssinableRoleBloc, EstPointPersonAssinableRoleState>(
          listener: (context, state) {
            if (state is EstPointPersonAssignableRoleLoadingState) {
              final progress = ProgressHUD.of(context);
              progress!.showWithText("Please wait...");
            }
            if (state is EstPointPersonAssignableRoleLoaded ||
                state is EstPointPersonAssginableRoleAssignState ||
                state is EstPointPersonAssignableErrorState) {
              final progress = ProgressHUD.of(context);
              progress!.dismiss();
            }
                 ////Added State
            if (state is EstPointPersonAssginableRoleAssignState) {
              if (state.responseStatus['success']) {
                successAlert(
                    context, "Adding Successfull!", state.responseStatus['message'],
                    () {
                  Navigator.of(context).pop();
                  context.read<EstPointPersonAssinableRoleBloc>().add(GetEstPointPersonAssignableRoles(roleId:16 ));
                });
              } else {
                errorAlert(context, "Adding Failed", state.responseStatus['message'],
                    () {
                  Navigator.of(context).pop();
                  context.read<EstPointPersonAssinableRoleBloc>().add(GetEstPointPersonAssignableRoles(roleId:16 ));
                });
              }
            }

              ////Deleted State
            if (state is EstPointPersonAssignableDeletedState) {
              if (state.success) {
                successAlert(
                    context, "Delete Successfull!", "Role Deleted Successfully",
                    () {
                  Navigator.of(context).pop();
      context.read<EstPointPersonAssinableRoleBloc>().add(GetEstPointPersonAssignableRoles(roleId:16 ));
                });
              } else {
                errorAlert(context, "Delete Failed", "Role Delete Failed", () {
                  Navigator.of(context).pop();
                  context.read<EstPointPersonAssinableRoleBloc>().add(GetEstPointPersonAssignableRoles(roleId:16 ));
                });
              }
            }
           
          },
          builder: (context, state) {
            final parent = context;
            
            if (state is EstPointPersonAssignableRoleLoaded) {
              roles = state.roles;
              mainRole = state.mainRole;
              if (state.rolesUnder.isNotEmpty) {
                return ListView.builder(
                    padding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
                    itemCount: state.rolesUnder.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Column(
                        children: [
                          Container(
                            width: screenWidth,
                            decoration: box1(),
                            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.rolesUnder[index].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<EstPointPersonAssinableRoleBloc>().add(
                                            DeleteEstPointPersonAssignableRoles(
                                                roleId:
                                                    state.rolesUnder[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 SizedBox(
                            height: 5,
                          )
                        ],
                      );
                    });
              } else {
                return const EmptyData(
                    message: "No Role available. Please click + to add.");
              }
            }
            if (state is EstPointPersonAssignableErrorState) {
              return SomethingWentWrong(
                  message: state.message, onpressed: () {
                    context.read<RoleBloc>().add(GetRoles());
                  });
            }
            return Container();
          },
        ),
      ),
    );
  }
}
