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 showSaveRoutineDialog(BuildContext context) async { return showDialog( context: context, builder: (BuildContext context) { return BlocBuilder( 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: [ // Left side - IF Expanded( child: ListView( // crossAxisAlignment: CrossAxisAlignment.start, 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); }), ], ), ), const SizedBox(width: 16), // Right side - THEN items 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); }), ], ), ), ], ), ), DialogFooter( onCancel: () => Navigator.pop(context), onConfirm: () async { if (state.isAutomation) { if (state.isUpdate ?? false) { context .read() .add(const UpdateAutomation()); } else { context .read() .add(const CreateAutomationEvent()); } } else { if (state.isUpdate ?? false) { context.read().add(const UpdateScene()); } else { context .read() .add(const CreateSceneEvent()); } } Navigator.pop(context); }, isConfirmEnabled: true, ), ], ), ), ); }, ); }, ); } static Widget functionRow( dynamic item, BuildContext context, List 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((f) => Text( '${f.operationName}: ${f.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, ), ), ], ), ), ], ), ], ), ); } }