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/one_gang_switch/one_gang_switch.dart';
import 'package:syncrow_web/pages/routiens/widgets/dialog_footer.dart';
import 'package:syncrow_web/pages/routiens/widgets/dialog_header.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

class OneGangSwitchHelper {
  static Future<Map<String, dynamic>?> showSwitchFunctionsDialog(
    BuildContext context,
    List<DeviceFunction<dynamic>> functions,
  ) async {
    List<DeviceFunction<dynamic>> switchFunctions = functions
        .where(
            (f) => f is OneGangSwitchFunction || f is OneGangCountdownFunction)
        .toList();
    final selectedFunctionNotifier = ValueNotifier<String?>(null);
    final selectedValueNotifier = ValueNotifier<dynamic>(null);
    final selectedConditionNotifier = ValueNotifier<String?>("<");
    final selectedConditionsNotifier =
        ValueNotifier<List<bool>>([true, false, false]);

    return showDialog<Map<String, dynamic>?>(
      context: context,
      builder: (BuildContext context) {
        return ValueListenableBuilder<String?>(
          valueListenable: selectedFunctionNotifier,
          builder: (context, selectedFunction, _) {
            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: [
                    const DialogHeader('1 Gang Light Switch Condition'),
                    Expanded(
                      child: Row(
                        children: [
                          // Left side: Function list
                          Expanded(
                            child: ListView.separated(
                              itemCount: switchFunctions.length,
                              separatorBuilder: (_, __) => const Divider(
                                color: ColorsManager.dividerColor,
                              ),
                              itemBuilder: (context, index) {
                                final function = switchFunctions[index];
                                return ValueListenableBuilder<String?>(
                                  valueListenable: selectedFunctionNotifier,
                                  builder: (context, selectedFunction, _) {
                                    final isSelected =
                                        selectedFunction == function.code;
                                    return ListTile(
                                      tileColor: isSelected
                                          ? Colors.grey.shade100
                                          : null,
                                      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: () {
                                        selectedFunctionNotifier.value =
                                            function.code;
                                        selectedValueNotifier.value =
                                            function is OneGangCountdownFunction
                                                ? 0
                                                : null;
                                      },
                                    );
                                  },
                                );
                              },
                            ),
                          ),
                          // Right side: Value selector
                          if (selectedFunction != null)
                            ValueListenableBuilder<String?>(
                              valueListenable: selectedFunctionNotifier,
                              builder: (context, selectedFunction, _) {
                                final selectedFn = switchFunctions.firstWhere(
                                  (f) => f.code == selectedFunction,
                                );
                                return Expanded(
                                  child: selectedFn is OneGangCountdownFunction
                                      ? _buildCountDownSelector(
                                          context,
                                          selectedValueNotifier,
                                          selectedConditionNotifier,
                                          selectedConditionsNotifier,
                                        )
                                      : _buildOperationalValuesList(
                                          context,
                                          selectedFn as BaseSwitchFunction,
                                          selectedValueNotifier,
                                        ),
                                );
                              },
                            ),
                        ],
                      ),
                    ),
                    Container(
                      height: 1,
                      width: double.infinity,
                      color: ColorsManager.greyColor,
                    ),
                    DialogFooter(
                      onCancel: () => Navigator.pop(context),
                      onConfirm: selectedFunctionNotifier.value != null &&
                              selectedValueNotifier.value != null
                          ? () {
                              final selectedFn = switchFunctions.firstWhere(
                                (f) => f.code == selectedFunctionNotifier.value,
                              );
                              final value = selectedValueNotifier.value;
                              final functionData = DeviceFunctionData(
                                entityId: selectedFn.deviceId,
                                function: selectedFn.code,
                                operationName: selectedFn.operationName,
                                value: value,
                                condition: selectedConditionNotifier.value,
                                valueDescription:
                                    selectedFn is OneGangCountdownFunction
                                        ? '${value} sec'
                                        : ((selectedFn as BaseSwitchFunction)
                                            .getOperationalValues()
                                            .firstWhere((v) => v.value == value)
                                            .description),
                              );
                              Navigator.pop(
                                  context, {selectedFn.code: functionData});
                            }
                          : null,
                      isConfirmEnabled:
                          selectedFunctionNotifier.value != null &&
                              selectedValueNotifier.value != null,
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }

  static Widget _buildCountDownSelector(
    BuildContext context,
    ValueNotifier<dynamic> valueNotifier,
    ValueNotifier<String?> conditionNotifier,
    ValueNotifier<List<bool>> conditionsNotifier,
  ) {
    return ValueListenableBuilder<dynamic>(
      valueListenable: valueNotifier,
      builder: (context, value, _) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ValueListenableBuilder<List<bool>>(
              valueListenable: conditionsNotifier,
              builder: (context, selectedConditions, _) {
                return ToggleButtons(
                  onPressed: (int index) {
                    final newConditions = List<bool>.filled(3, false);
                    newConditions[index] = true;
                    conditionsNotifier.value = newConditions;
                    conditionNotifier.value = index == 0
                        ? "<"
                        : index == 1
                            ? "=="
                            : ">";
                  },
                  borderRadius: const BorderRadius.all(Radius.circular(8)),
                  selectedBorderColor: ColorsManager.primaryColorWithOpacity,
                  selectedColor: Colors.white,
                  fillColor: ColorsManager.primaryColorWithOpacity,
                  color: ColorsManager.primaryColorWithOpacity,
                  constraints: const BoxConstraints(
                    minHeight: 40.0,
                    minWidth: 40.0,
                  ),
                  isSelected: selectedConditions,
                  children: const [Text("<"), Text("="), Text(">")],
                );
              },
            ),
            const SizedBox(height: 20),
            Text(
              '${value ?? 0} sec',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 20),
            Slider(
              value: (value ?? 0).toDouble(),
              min: 0,
              max: 300,
              divisions: 300,
              onChanged: (newValue) {
                valueNotifier.value = newValue.toInt();
              },
            ),
          ],
        );
      },
    );
  }

  static Widget _buildOperationalValuesList(
    BuildContext context,
    BaseSwitchFunction function,
    ValueNotifier<dynamic> valueNotifier,
  ) {
    final values = function.getOperationalValues();
    return ValueListenableBuilder<dynamic>(
      valueListenable: valueNotifier,
      builder: (context, selectedValue, _) {
        return ListView.builder(
          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) {
                  valueNotifier.value = newValue;
                },
              ),
            );
          },
        );
      },
    );
  }
}