syncrow-web/lib/pages/routines/helper/save_routine_helper.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routines/models/device_functions.dart';
import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

class SaveRoutineHelper {
  static Future<void> showSaveRoutineDialog(BuildContext context) async {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return BlocBuilder<RoutineBloc, RoutineState>(
          builder: (context, state) {
            return AlertDialog(
              contentPadding: EdgeInsets.zero,
              content: Container(
                width: MediaQuery.sizeOf(context).width * 0.5,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    DialogHeader('Create a scene: ${state.routineName ?? ""}'),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 16,
                        vertical: 8,
                      ),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          _buildIfConditions(state, context),
                          const SizedBox(width: 16),
                          _buildThenActions(state, context),
                        ],
                      ),
                    ),
                    _buildDialogFooter(context, state),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }

  static DialogFooter _buildDialogFooter(BuildContext context, RoutineState state) {
    return DialogFooter(
      onCancel: () => Navigator.pop(context),
      onConfirm: () {
        if (state.isAutomation) {
          if (state.isUpdate ?? false) {
            context.read<RoutineBloc>().add(const UpdateAutomation());
          } else {
            context.read<RoutineBloc>().add(const CreateAutomationEvent());
          }
        } else {
          if (state.isUpdate ?? false) {
            context.read<RoutineBloc>().add(const UpdateScene());
          } else {
            context.read<RoutineBloc>().add(const CreateSceneEvent());
          }
        }

        Navigator.pop(context);
      },
      isConfirmEnabled: true,
    );
  }

  static Expanded _buildThenActions(RoutineState state, BuildContext context) {
    return Expanded(
      child: ListView(
        shrinkWrap: true,
        children: [
          const Text(
            'THEN:',
            style: TextStyle(
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 8),
          ...state.thenItems.map((item) {
            final functions = state.selectedFunctions[item['uniqueCustomId']] ?? [];
            return functionRow(item, context, functions);
          }),
        ],
      ),
    );
  }

  static Expanded _buildIfConditions(RoutineState state, BuildContext context) {
    return Expanded(
      child: ListView(
        shrinkWrap: true,
        children: [
          const Text(
            'IF:',
            style: TextStyle(
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 8),
          if (state.isTabToRun)
            ListTile(
              leading: SvgPicture.asset(
                Assets.tabToRun,
                width: 24,
                height: 24,
              ),
              title: const Text('Tab to run'),
            ),
          if (state.isAutomation)
            ...state.ifItems.map((item) {
              final functions =
                  state.selectedFunctions[item['uniqueCustomId']] ?? [];
              return functionRow(item, context, functions);
            }),
        ],
      ),
    );
  }

  static Widget functionRow(
    dynamic item,
    BuildContext context,
    List<DeviceFunctionData> functions,
  ) {
    return Padding(
      padding: const EdgeInsets.only(top: 6),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              spacing: 17,
              children: [
                Container(
                  width: 22,
                  height: 22,
                  padding: const EdgeInsetsDirectional.all(4),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: ColorsManager.textFieldGreyColor,
                    border: Border.all(
                      color: ColorsManager.neutralGray,
                      width: 1.5,
                    ),
                  ),
                  child: Center(
                    child: item['type'] == 'tap_to_run' || item['type'] == 'scene'
                        ? Image.memory(
                            base64Decode(item['icon']),
                            width: 12,
                            height: 22,
                            fit: BoxFit.scaleDown,
                          )
                        : SvgPicture.asset(
                            item['imagePath'],
                            width: 12,
                            height: 12,
                            fit: BoxFit.scaleDown,
                          ),
                  ),
                ),
                Flexible(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    spacing: 2,
                    children: [
                      Text(
                        item['title'],
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: context.textTheme.bodySmall?.copyWith(
                          fontSize: 15,
                          color: ColorsManager.textPrimaryColor,
                        ),
                      ),
                      Wrap(
                        runSpacing: 16,
                        spacing: 4,
                        children: functions
                            .map(
                              (function) => Text(
                                '${function.operationName}: ${function.value}',
                                style: context.textTheme.bodySmall?.copyWith(
                                  color: ColorsManager.grayColor,
                                  fontSize: 8,
                                ),
                                overflow: TextOverflow.ellipsis,
                                maxLines: 3,
                              ),
                            )
                            .toList(),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            spacing: 2,
            children: [
              Visibility(
                visible: item['tag'] != null && item['tag'] != '',
                child: Row(
                  spacing: 2,
                  children: [
                    SizedBox(
                      width: 8,
                      height: 8,
                      child: SvgPicture.asset(
                        Assets.deviceTagIcon,
                      ),
                    ),
                    Text(
                      item['tag'] ?? '',
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: context.textTheme.bodySmall?.copyWith(
                        color: ColorsManager.lightGreyColor,
                        fontSize: 9,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ],
                ),
              ),
              Visibility(
                visible: item['subSpace'] != null && item['subSpace'] != '',
                child: Row(
                  spacing: 2,
                  children: [
                    SizedBox(
                      width: 8,
                      height: 8,
                      child: SvgPicture.asset(
                        Assets.spaceLocationIcon,
                      ),
                    ),
                    Text(
                      item['subSpace'] ?? '',
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: context.textTheme.bodySmall?.copyWith(
                        color: ColorsManager.lightGreyColor,
                        fontSize: 9,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}