import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/menu/bloc/create_unit_bloc/create_unit_bloc.dart';
import 'package:syncrow_app/features/menu/bloc/create_unit_bloc/create_unit_event.dart';
import 'package:syncrow_app/features/menu/bloc/create_unit_bloc/create_unit_state.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/helpers/snack_bar.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

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

  @override
  Widget build(BuildContext context) {
    String unitName = '';
    TextEditingController textEditingController = TextEditingController();

    return BlocProvider(
      create: (context) => CreateUnitBloc(),
      child: BlocConsumer<CreateUnitBloc, CreateUnitState>(
        listener: (context, state) {
          if (state is RoomsSavedSuccessfully) {
            CustomSnackBar.displaySnackBar('Unit created successfully');
            Navigator.of(context).pop();
          }

          if (state is ErrorState) {
            CustomSnackBar.displaySnackBar(state.message);
          }
        },
        builder: (context, state) {
          textEditingController.text = '';
          return DefaultScaffold(
            actions: [
              TextButton(
                onPressed: () {
                  BlocProvider.of<CreateUnitBloc>(context).add(SaveRooms(
                    communityName: 'Community Test',
                    buildingName: 'Building Test',
                    floorName: 'Floor Test',
                    unitName: unitName,
                  ));
                },
                child: const BodyLarge(
                  text: 'Save',
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
            title: 'Create a Unit',
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 40),
              width: MediaQuery.sizeOf(context).width,
              height: MediaQuery.sizeOf(context).height,
              child: state is LoadingState
                  ? const Center(
                      child: CircularProgressIndicator(),
                    )
                  : SingleChildScrollView(
                      child: Column(
                        children: [
                          // Home Info
                          DefaultContainer(
                            padding: const EdgeInsets.symmetric(
                              horizontal: 25,
                              vertical: 5,
                            ),
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    const BodyMedium(text: 'Unit Name'),
                                    Flexible(
                                      child: TextField(
                                        textAlign: TextAlign.end,
                                        onChanged: (value) {
                                          unitName = value;
                                        },
                                        decoration: InputDecoration(
                                          hintText: 'Enter Name',
                                          hintStyle:
                                              context.bodyMedium.copyWith(color: Colors.grey),
                                          border: InputBorder.none,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                                const Divider(
                                  color: ColorsManager.greyColor,
                                ),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    const BodyMedium(text: 'Location '),
                                    Flexible(
                                      child: TextField(
                                        textAlign: TextAlign.end,
                                        onChanged: (value) {},
                                        decoration: InputDecoration(
                                          hintText: 'Set',
                                          hintStyle:
                                              context.bodyMedium.copyWith(color: Colors.grey),
                                          border: InputBorder.none,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),

                          // Rooms Info
                          const SizedBox(height: 10),
                          const Row(
                            children: [
                              SizedBox(
                                width: 25,
                              ),
                              BodySmall(
                                text: 'Spaces',
                                fontWeight: FontWeight.bold,
                              ),
                            ],
                          ),
                          const SizedBox(
                            height: 4,
                          ),
                          Container(
                            // margin: EdgeInsets.zero,
                            // margin: const EdgeInsets.symmetric(
                            //   horizontal: 25,
                            //   vertical: 5,
                            // ),
                            decoration: const ShapeDecoration(
                              color: Colors.white,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.all(Radius.circular(20)),
                              ),
                            ),
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                if (state is CreateRoomState)
                                  if (state.roomList.isNotEmpty)
                                    Column(
                                      children: [
                                        ListView.separated(
                                          physics: const NeverScrollableScrollPhysics(),
                                          shrinkWrap: true,
                                          separatorBuilder: (context, index) => const Divider(
                                            color: ColorsManager.greyColor,
                                          ),
                                          itemCount: state.roomList.length,
                                          itemBuilder: (context, index) {
                                            return Dismissible(
                                              key: Key(state.roomList[index]),
                                              background: Container(
                                                padding: const EdgeInsets.only(right: 10),
                                                alignment: AlignmentDirectional.centerEnd,
                                                decoration: ShapeDecoration(
                                                  color: const Color(0xFFFF0000),
                                                  shape: RoundedRectangleBorder(
                                                    borderRadius: BorderRadius.only(
                                                      topLeft: Radius.circular(index == 0 ? 20 : 0),
                                                      topRight:
                                                          Radius.circular(index == 0 ? 20 : 0),
                                                    ),
                                                  ),
                                                ),
                                                child: SvgPicture.asset(
                                                  Assets.assetsDeleteIcon,
                                                  width: 20,
                                                  height: 22,
                                                ),
                                              ),
                                              direction: DismissDirection.endToStart,
                                              onDismissed: (direction) {
                                                String removedUnit = state.roomList[index];

                                                BlocProvider.of<CreateUnitBloc>(context)
                                                    .add(RemoveRoomEvent(roomName: removedUnit));

                                                ScaffoldMessenger.of(context).showSnackBar(
                                                  SnackBar(content: Text('$removedUnit removed')),
                                                );
                                              },
                                              child: Container(
                                                height: 50,
                                                padding: const EdgeInsets.symmetric(
                                                    vertical: 16, horizontal: 25),
                                                child: Text(
                                                  state.roomList[index],
                                                  style: const TextStyle(
                                                    color: Color(0xFF5D5D5D),
                                                    fontSize: 15,
                                                    fontWeight: FontWeight.w400,
                                                  ),
                                                ),
                                              ),
                                            );
                                          },
                                        ),
                                        const Divider(
                                          color: ColorsManager.greyColor,
                                        ),
                                      ],
                                    ),
                                Container(
                                  padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 5),
                                  child: Row(
                                    children: [
                                      TextButton(
                                        onPressed: () {
                                          if (textEditingController.text.isEmpty) {
                                            ScaffoldMessenger.of(context).showSnackBar(
                                              const SnackBar(
                                                  content: Text('Please add the room name')),
                                            );
                                            return;
                                          }
                                          BlocProvider.of<CreateUnitBloc>(context).add(
                                              CreateRoomEvent(
                                                  roomName: textEditingController.text));
                                          textEditingController.clear();
                                        },
                                        child: const Row(
                                          mainAxisAlignment: MainAxisAlignment.start,
                                          children: [
                                            BodyMedium(
                                              text: 'Add custom Space',
                                              fontColor: ColorsManager.primaryColor,
                                            ),
                                          ],
                                        ),
                                      ),
                                      Flexible(
                                        child: TextField(
                                          textAlign: TextAlign.end,
                                          controller: textEditingController,
                                          decoration: InputDecoration(
                                            hintText: 'Set',
                                            hintStyle:
                                                context.bodyMedium.copyWith(color: Colors.grey),
                                            border: InputBorder.none,
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
            ),
          );
        },
      ),
    );
  }
}
