import 'package:flutter/material.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/utils/color_manager.dart';
import 'package:syncrow_web/utils/style.dart';

class RoleDropdown extends StatefulWidget {
  final UsersBloc? bloc;
  const RoleDropdown({super.key, this.bloc});

  @override
  _RoleDropdownState createState() => _RoleDropdownState();
}

class _RoleDropdownState extends State<RoleDropdown> {
  late String selectedRole;

  @override
  void initState() {
    super.initState();
    selectedRole = widget.bloc!.roleSelected;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Row(
            children: [
              Text(
                " * ",
                style: TextStyle(
                  color: ColorsManager.red,
                  fontWeight: FontWeight.w900,
                  fontSize: 15,
                ),
              ),
              Text(
                "Role",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                  color: Colors.black,
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          SizedBox(
            child: DropdownButtonFormField<String>(
              dropdownColor: ColorsManager.whiteColors,
              // alignment: Alignment.,
              focusColor: Colors.white,
              autofocus: true,
              value: selectedRole.isNotEmpty ? selectedRole : null,
              items: widget.bloc!.roles.map((role) {
                return DropdownMenuItem<String>(
                  value: role.uuid,
                  child: Text(
                    ' ${role.type.isNotEmpty ? role.type[0].toUpperCase() : ''}${role.type.substring(1)}',
                  ),
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  selectedRole = value!;
                });
                widget.bloc!.roleSelected = selectedRole;
                widget.bloc!
                    .add(PermissionEvent(roleUuid: widget.bloc!.roleSelected));
              },
              icon: const SizedBox.shrink(),
              borderRadius: const BorderRadius.all(Radius.circular(10)),
              hint: const Padding(
                padding: EdgeInsets.only(left: 10),
                child: Text(
                  "Please Select",
                  style: TextStyle(
                    color: ColorsManager.textGray,
                  ),
                ),
              ),
              decoration: inputTextFormDeco().copyWith(
                contentPadding: EdgeInsets.zero,
                suffixIcon: Container(
                  padding: EdgeInsets.zero,
                  width: 70,
                  height: 45,
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: const BorderRadius.only(
                      bottomRight: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                    border: Border.all(
                      color: ColorsManager.textGray,
                      width: 1.0,
                    ),
                  ),
                  child: const Center(
                    child: Icon(
                      Icons.keyboard_arrow_down,
                      color: ColorsManager.textGray,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
