import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routiens/widgets/dragable_card.dart';
import 'package:syncrow_web/pages/routiens/widgets/routine_devices.dart';
import 'package:syncrow_web/pages/routiens/widgets/routines_title_widget.dart';
import 'package:syncrow_web/pages/routiens/widgets/scenes_and_automations.dart';
import 'package:syncrow_web/pages/routiens/widgets/search_bar_condition_title.dart';
import 'package:syncrow_web/utils/constants/assets.dart';

class ConditionsRoutinesDevicesView extends StatelessWidget {
  const ConditionsRoutinesDevicesView({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<RoutineBloc, RoutineState>(
      builder: (context, state) {
        return const Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ConditionTitleAndSearchBar(),
                SizedBox(height: 10),
                Wrap(
                  spacing: 10,
                  runSpacing: 10,
                  children: [
                    DraggableCard(
                      imagePath: Assets.tabToRun,
                      title: 'Tab to run',
                      deviceData: {
                        'deviceId': 'tab_to_run',
                        'type': 'trigger',
                        'name': 'Tab to run',
                      },
                    ),
                    DraggableCard(
                      imagePath: Assets.map,
                      title: 'Location',
                      deviceData: {
                        'deviceId': 'location',
                        'type': 'trigger',
                        'name': 'Location',
                      },
                    ),
                    DraggableCard(
                      imagePath: Assets.weather,
                      title: 'Weather',
                      deviceData: {
                        'deviceId': 'weather',
                        'type': 'trigger',
                        'name': 'Weather',
                      },
                    ),
                    DraggableCard(
                      imagePath: Assets.schedule,
                      title: 'Schedule',
                      deviceData: {
                        'deviceId': 'schedule',
                        'type': 'trigger',
                        'name': 'Schedule',
                      },
                    ),
                  ],
                ),
                const SizedBox(height: 10),
                const TitleRoutine(
                  title: 'Conditions',
                  subtitle: '(THEN)',
                ),
                const SizedBox(height: 10),
                const Wrap(
                  spacing: 10,
                  runSpacing: 10,
                  children: [
                    DraggableCard(
                      imagePath: Assets.notification,
                      title: 'Send Notification',
                      deviceData: {
                        'deviceId': 'notification',
                        'type': 'action',
                        'name': 'Send Notification',
                      },
                    ),
                    DraggableCard(
                      imagePath: Assets.delay,
                      title: 'Delay the action',
                      deviceData: {
                        'deviceId': 'delay',
                        'type': 'action',
                        'name': 'Delay the action',
                      },
                    ),
                  ],
                ),
                const SizedBox(height: 10),
                const TitleRoutine(
                  title: 'Routines',
                  subtitle: '(THEN)',
                ),
                const SizedBox(height: 10),
                const ScenesAndAutomations(),
                const SizedBox(height: 10),
                const TitleRoutine(
                  title: 'Devices',
                  subtitle: '',
                ),
                const SizedBox(height: 10),
                const RoutineDevices(),
              ],
            ),
          ),
        );
      },
    );
  }
}