import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart';
import 'package:syncrow_web/pages/routiens/models/gang_switches/two_gang_switch/two_gang_switch.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

class TwoGangSwitchHelper {
  static Future<Map<String, dynamic>?> showSwitchFunctionsDialog(
      BuildContext context, List<DeviceFunction<dynamic>> functions) async {
    List<DeviceFunction<dynamic>> switchFunctions = functions
        .where((f) =>
            f is TwoGangSwitch1Function ||
            f is TwoGangSwitch2Function ||
            f is TwoGangCountdown1Function ||
            f is TwoGangCountdown2Function)
        .toList();
    String? selectedFunction;
    dynamic selectedValue;

    return showDialog<Map<String, dynamic>?>(
      context: context,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (context, setState) {
            return AlertDialog(
              contentPadding: EdgeInsets.zero,
              content: Container(
                width: selectedFunction != null ? 600 : 360,
                height: 450,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20),
                ),
                padding: const EdgeInsets.only(top: 20),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      '2 Gangs Light Switch Condition',
                      style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                            color: ColorsManager.primaryColorWithOpacity,
                            fontWeight: FontWeight.bold,
                          ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 15, horizontal: 50),
                      child: Container(
                        height: 1,
                        width: double.infinity,
                        color: ColorsManager.greyColor,
                      ),
                    ),
                    Flexible(
                      child: Row(
                        children: [
                          Expanded(
                            child: ListView.separated(
                              shrinkWrap: false,
                              physics: const AlwaysScrollableScrollPhysics(),
                              itemCount: switchFunctions.length,
                              separatorBuilder: (context, index) =>
                                  const Divider(
                                color: ColorsManager.dividerColor,
                              ),
                              itemBuilder: (context, index) {
                                final function = switchFunctions[index];
                                return ListTile(
                                  leading: SvgPicture.asset(
                                    function.icon,
                                    width: 24,
                                    height: 24,
                                  ),
                                  title: Text(
                                    function.operationName,
                                    style: context.textTheme.bodyMedium,
                                  ),
                                  trailing: const Icon(
                                    Icons.arrow_forward_ios,
                                    size: 16,
                                    color: ColorsManager.textGray,
                                  ),
                                  onTap: () {
                                    setState(() {
                                      selectedFunction = function.code;
                                      selectedValue = null;
                                    });
                                  },
                                );
                              },
                            ),
                          ),
                          if (selectedFunction != null)
                            Expanded(
                              child: Builder(
                                builder: (context) {
                                  final selectedFn = switchFunctions.firstWhere(
                                          (f) => f.code == selectedFunction)
                                      as BaseSwitchFunction;
                                  final values =
                                      selectedFn.getOperationalValues();
                                  return ListView.builder(
                                    shrinkWrap: false,
                                    physics:
                                        const AlwaysScrollableScrollPhysics(),
                                    itemCount: values.length,
                                    itemBuilder: (context, index) {
                                      final value = values[index];
                                      return ListTile(
                                        leading: SvgPicture.asset(
                                          value.icon,
                                          width: 24,
                                          height: 24,
                                        ),
                                        title: Text(
                                          value.description,
                                          style: context.textTheme.bodyMedium,
                                        ),
                                        trailing: Radio<dynamic>(
                                          value: value.value,
                                          groupValue: selectedValue,
                                          onChanged: (newValue) {
                                            setState(() {
                                              selectedValue = newValue;
                                            });
                                          },
                                        ),
                                      );
                                    },
                                  );
                                },
                              ),
                            ),
                        ],
                      ),
                    ),
                    Container(
                      height: 1,
                      width: double.infinity,
                      color: ColorsManager.greyColor,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        GestureDetector(
                          onTap: () {
                            Navigator.pop(context);
                          },
                          child: Container(
                            height: 50,
                            width: selectedFunction != null ? 299 : 179,
                            decoration: const BoxDecoration(
                              border: Border(
                                right:
                                    BorderSide(color: ColorsManager.greyColor),
                              ),
                            ),
                            child: Center(
                              child: Text(
                                'Cancel',
                                style: Theme.of(context)
                                    .textTheme
                                    .bodyMedium!
                                    .copyWith(color: ColorsManager.greyColor),
                              ),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            if (selectedFunction != null &&
                                selectedValue != null) {
                              Navigator.pop(context, {
                                'function': selectedFunction,
                                'value': selectedValue,
                              });
                            }
                          },
                          child: SizedBox(
                            height: 50,
                            width: selectedFunction != null ? 299 : 179,
                            child: Center(
                              child: Text(
                                'Confirm',
                                style: Theme.of(context)
                                    .textTheme
                                    .bodyMedium!
                                    .copyWith(
                                      color:
                                          ColorsManager.primaryColorWithOpacity,
                                    ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }
}