// ignore_for_file: use_build_context_synchronously

import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import '../../../product/extension/context_extension.dart';
import '../../../bloc/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(context);
  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 StatefulBuilder(
        builder: (context, setState) {
          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: context.responsiveBodySmall,
              ),
              items: ownerDevices
                  .map(
                    (item) => DropdownMenuItem<String>(
                      value: item.thingId,
                      enabled: false,
                      child: StatefulBuilder(
                        builder: (context, menuSetState) {
                          final isSelected =
                              selectedItems.contains(item.thingId);
                          return InkWell(
                            onTap: () {
                              if (isSelected) {
                                selectedItems.remove(item.thingId);
                              } else {
                                selectedItems.add(item.thingId!);
                              }
                              selectedDevices =
                                  getDevices(ownerDevices, selectedItems);
                              setState(() {});
                              menuSetState(() {});
                            },
                            child: Container(
                              height: double.infinity,
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 16.0),
                              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: context.responsiveBodySmall,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  )
                  .toList(),
              value: selectedItems.isEmpty ? null : selectedItems.last,
              buttonStyleData: const ButtonStyleData(
                padding: EdgeInsets.only(right: 8),
              ),
              onChanged: (value) {},
              onSaved: (value) {},
              selectedItemBuilder: (context) {
                return ownerDevices.map((device) {
                  return Container(
                    alignment: AlignmentDirectional.center,
                    child: Text(
                      selectedDevices.join(', '),
                      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),
                ),
              ),
            ),
            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(context,groupID);
                  }

                  Navigator.of(dialogContext).pop();
                },
                child: Text(appLocalization(context).add_device_title),
              ),
            ],
          );
        },
      );
    },
  );
}

List<String> getDevices(List<Device> devices, List<String> selectedDevices) {
  return devices
      .where((device) => selectedDevices.contains(device.thingId))
      .map((device) => device.name ?? '')
      .toList();
}
