import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_event.dart';
import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_state.dart';
import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
import 'package:syncrow_web/pages/routines/create_new_routines/commu_dropdown.dart';
import 'package:syncrow_web/pages/routines/create_new_routines/space_dropdown.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class CreateNewRoutinesDialog extends StatefulWidget {
  const CreateNewRoutinesDialog({super.key});

  @override
  State<CreateNewRoutinesDialog> createState() =>
      _CreateNewRoutinesDialogState();
}

class _CreateNewRoutinesDialogState extends State<CreateNewRoutinesDialog> {
  String? _selectedCommunity;
  String? _selectedSpace;
  String? _selectedId;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        create: (BuildContext context) => CreateRoutineBloc(),
        child: BlocBuilder<CreateRoutineBloc, CreateRoutineState>(
          builder: (context, state) {
            final _bloc = BlocProvider.of<CreateRoutineBloc>(context);
            final spaces = _bloc.spacesOnlyWithDevices;
            final isLoadingCommunities = state is CommunitiesLoadingState;
            final isLoadingSpaces = state is SpaceWithDeviceLoadingState;
            String spaceHint = 'Please Select';
            if (_selectedCommunity != null) {
              if (isLoadingSpaces) {
                spaceHint = 'Loading spaces...';
              } else if (spaces.isEmpty) {
                spaceHint = 'No spaces available';
              } else {
                spaceHint = 'Select Space';
              }
            }
            if (_selectedId != null && _selectedCommunity != _selectedId) {
              _selectedSpace = null;
              _selectedCommunity = _selectedId;
            }
            return Dialog(
              backgroundColor: Colors.white,
              insetPadding: const EdgeInsets.symmetric(
                horizontal: 20,
              ),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12)),
              child: Container(
                width: 450,
                child: Stack(
                  children: [
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const SizedBox(height: 20),
                        Text(
                          'Create New Routines',
                          textAlign: TextAlign.center,
                          style:
                              Theme.of(context).textTheme.bodyMedium!.copyWith(
                                    color: ColorsManager.spaceColor,
                                    fontSize: 20,
                                    fontWeight: FontWeight.w700,
                                  ),
                        ),
                        const Divider(),
                        const SizedBox(height: 20),
                        Column(
                          children: [
                            Column(
                              children: [
                                Padding(
                                    padding: const EdgeInsets.only(
                                        left: 13, right: 10),
                                    child: Column(
                                      children: [
                                        SpaceTreeDropdown(
                                          selectedSpaceId: _selectedId,
                                          onChanged: (String? newValue) {
                                            setState(
                                                () => _selectedId = newValue!);
                                            if (_selectedId != null) {
                                              _bloc.add(
                                                  SpaceOnlyWithDevicesEvent(
                                                      _selectedId!));
                                            }
                                          },
                                        ),
                                      ],
                                    )),
                                const SizedBox(height: 21),
                                Padding(
                                  padding: const EdgeInsets.only(
                                      left: 15, right: 20),
                                  child: SpaceDropdown(
                                    hintMessage: spaceHint,
                                    spaces: spaces,
                                    selectedValue: _selectedSpace,
                                    onChanged: (String? newValue) {
                                      setState(() {
                                        _selectedSpace = newValue;
                                      });
                                    },
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                        const SizedBox(height: 20),
                        const Divider(),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: [
                            Padding(
                              padding: const EdgeInsets.only(
                                left: 20,
                                right: 20,
                              ),
                              child: TextButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                                child: Text(
                                  'Cancel',
                                  style: Theme.of(context)
                                      .textTheme
                                      .bodyMedium!
                                      .copyWith(
                                        fontWeight: FontWeight.w400,
                                        fontSize: 14,
                                        color: ColorsManager.blackColor,
                                      ),
                                ),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(
                                left: 20,
                                right: 20,
                              ),
                              child: TextButton(
                                onPressed: _selectedCommunity != null &&
                                        _selectedSpace != null
                                    ? () {
                                        Navigator.of(context).pop({
                                          'community': _selectedCommunity,
                                          'space': _selectedSpace,
                                        });
                                      }
                                    : null,
                                child: Text(
                                  'Next',
                                  style: Theme.of(context)
                                      .textTheme
                                      .bodyMedium!
                                      .copyWith(
                                        fontWeight: FontWeight.w400,
                                        fontSize: 14,
                                        color: _selectedCommunity != null &&
                                                _selectedSpace != null
                                            ? ColorsManager.blueColor
                                            : Colors.blue.shade100,
                                      ),
                                ),
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(height: 10),
                      ],
                    ),
                    if (isLoadingCommunities)
                      const SizedBox(
                        height: 200,
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Center(
                              child: CircularProgressIndicator(
                                color: ColorsManager.primaryColor,
                              ),
                            ),
                          ],
                        ),
                      ),
                  ],
                ),
              ),
            );
          },
        ));
  }
}