import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_bloc.dart';
import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_event.dart';
import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/bloc/users_status.dart';
import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/view/permission_management.dart';
import 'package:syncrow_web/pages/roles_and_permission/users_page/add_user_dialog/view/role_dropdown.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';

class RolesAndPermission extends StatelessWidget {
  const RolesAndPermission({super.key});
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<UsersBloc, UsersState>(builder: (context, state) {
      final _blocRole = BlocProvider.of<UsersBloc>(context);
      return Container(
        color: Colors.white,
        child: Form(
          key: _blocRole.formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                'Role & Permissions',
                style: context.textTheme.bodyLarge?.copyWith(
                    fontWeight: FontWeight.w700,
                    fontSize: 20,
                    color: Colors.black),
              ),
              const SizedBox(
                height: 15,
              ),
              SizedBox(
                  width: 350,
                  height: 100,
                  child: RoleDropdown(
                    bloc: _blocRole,
                  )),
              const SizedBox(height: 10),
              Expanded(
                child: SizedBox(
                  child: Column(
                    children: [
                      Expanded(
                        flex: 2,
                        child: Container(
                          decoration: const BoxDecoration(
                            color: ColorsManager.circleRolesBackground,
                            borderRadius: BorderRadius.only(
                                topRight: Radius.circular(20),
                                topLeft: Radius.circular(20)),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Row(
                              children: [
                                Expanded(
                                  child: Container(
                                    decoration: BoxDecoration(
                                        borderRadius: const BorderRadius.all(
                                            Radius.circular(20)),
                                        border: Border.all(
                                            color: ColorsManager.grayBorder)),
                                    child: TextFormField(
                                      style:
                                          const TextStyle(color: Colors.black),
                                      controller:
                                          _blocRole.roleSearchController,
                                      onChanged: (value) {
                                        _blocRole.add(SearchPermission(
                                            nodes: _blocRole.permissions,
                                            searchTerm: value));
                                      },
                                      decoration: textBoxDecoration(radios: 20)!
                                          .copyWith(
                                        fillColor: Colors.white,
                                        suffixIcon: Padding(
                                          padding:
                                              const EdgeInsets.only(right: 16),
                                          child: SvgPicture.asset(
                                            Assets.textFieldSearch,
                                            width: 24,
                                            height: 24,
                                          ),
                                        ),
                                        hintStyle: context.textTheme.bodyMedium
                                            ?.copyWith(
                                                fontWeight: FontWeight.w400,
                                                fontSize: 12,
                                                color: ColorsManager.textGray),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                          flex: 7,
                          child: Container(
                              color: ColorsManager.circleRolesBackground,
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                  color: ColorsManager.whiteColors,
                                  child: PermissionManagement(
                                    bloc: _blocRole,
                                  ))))
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    });
  }
}
