// ignore_for_file: use_build_context_synchronously

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'group_detail_bloc.dart';
import '../../../product/constant/icon/icon_constants.dart';
import '../../../product/services/language_services.dart';

import '../../devices/device_model.dart';
import 'group_detail_model.dart';

addDeviceDialog(BuildContext context, DetailGroupBloc detailGroupBloc,
    String groupID, List<DeviceOfGroup> devices) async {
  List<Device> ownerDevices = await detailGroupBloc.getOwnerDevices();
  List<String> selectedItems = [];
  List<String> selectedDevices = [];
  if (devices.isNotEmpty) {
    ownerDevices.removeWhere((element) =>
        devices.any((device) => device.thingId == element.thingId));
  }
  showDialog(
      context: context,
      builder: (dialogContext) {
        return AlertDialog(
          title: Center(child: Text(appLocalization(context).add_device_title)),
          content: DropdownButtonFormField2<String>(
            isExpanded: true,
            decoration: InputDecoration(
              contentPadding: const EdgeInsets.symmetric(vertical: 10),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
              ),
            ),
            hint: Text(
              appLocalization(context).choose_device_dropdownButton,
              style: const TextStyle(fontSize: 14),
            ),
            items: ownerDevices
                .map((item) => DropdownMenuItem<String>(
                    value: item.thingId,
                    child: StatefulBuilder(builder: (context, menuSetState) {
                      final isSelected = selectedItems.contains(item.thingId);
                      final isNameSelected = selectedItems.contains(item.name);

                      return InkWell(
                        onTap: () {
                          isSelected
                              ? selectedItems.remove(item.thingId)
                              : selectedItems.add(item.thingId!);
                          isNameSelected
                              ? selectedDevices.remove(item.name)
                              : selectedDevices.add(item.name!);
                          menuSetState(() {});
                        },
                        child: SizedBox(
                          height: double.infinity,
                          child: Row(
                            children: [
                              if (isSelected)
                                const Icon(Icons.check_box_outlined)
                              else
                                const Icon(Icons.check_box_outline_blank),
                              const SizedBox(width: 10),
                              Expanded(
                                  child: Text(
                                item.name!,
                                style: const TextStyle(fontSize: 14),
                              ))
                            ],
                          ),
                        ),
                      );
                    })))
                .toList(),
            buttonStyleData: const ButtonStyleData(
              padding: EdgeInsets.only(right: 8),
            ),
            onChanged: (value) {
              // thingID = value!;
              // setState(() {});
            },
            onSaved: (value) {},
            selectedItemBuilder: (context) {
              return selectedDevices.map(
                (item) {
                  return Container(
                    alignment: AlignmentDirectional.center,
                    child: Text(
                      item,
                      style: const TextStyle(
                        fontSize: 14,
                        overflow: TextOverflow.ellipsis,
                      ),
                      maxLines: 1,
                    ),
                  );
                },
              ).toList();
            },
            iconStyleData: IconStyleData(
                icon: IconConstants.instance
                    .getMaterialIcon(Icons.arrow_drop_down)),
            dropdownStyleData: DropdownStyleData(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
              ),
            ),
            menuItemStyleData: const MenuItemStyleData(
              padding: EdgeInsets.symmetric(horizontal: 16),
            ),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.of(dialogContext).pop();
              },
              child: Text(
                appLocalization(context).cancel_button_content,
                style: const TextStyle(color: Colors.red),
              ),
            ),
            TextButton(
                onPressed: () async {
                  for (var device in selectedItems) {
                    await detailGroupBloc.addDeviceToGroup(
                        context, groupID, device);
                    await detailGroupBloc.getGroupDetail(groupID);
                  }
                },
                child: Text(appLocalization(context).add_device_title))
          ],
        );
      });
}
