import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_app/features/app_layout/model/space_model.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_event.dart';
import 'package:syncrow_app/features/devices/bloc/device_settings_bloc/device_scene_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_medium.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class LocationSettingPage extends StatelessWidget {
  final SpaceModel? space;
  final String? deviceId;

  const LocationSettingPage({
    super.key,
    this.space,
    this.deviceId,
  });

  @override
  Widget build(BuildContext context) {
    String roomIdSelected = '';

    return Scaffold(
      body: BlocProvider(
        create: (context) => DeviceSettingBloc(deviceId: deviceId ?? '')
          ..add(const DeviceSettingInitial())
          ..add(const DeviceSettingInitialInfo())
          ..add(FetchRoomsEvent(unit: space!)),
        child: BlocBuilder<DeviceSettingBloc, DeviceSettingState>(
          builder: (context, state) {
            final _bloc = BlocProvider.of<DeviceSettingBloc>(context);
            if (state is SaveSelectionSuccessState) {
              Future.delayed(const Duration(microseconds: 500), () {
                _bloc.add(const DeviceSettingInitialInfo());
                Navigator.of(context).pop(true);
              });
            }
            return state is DeviceSettingLoadingState
                ? const Center(
                    child: DefaultContainer(
                      width: 50,
                      height: 50,
                      child: CircularProgressIndicator(),
                    ),
                  )
                : DefaultScaffold(
                    actions: [
                      BlocBuilder<DeviceSettingBloc, DeviceSettingState>(
                        builder: (context, state) {
                          final bool canSave = state is OptionSelectedState &&
                              state.hasSelectionChanged;
                          return InkWell(
                            onTap: canSave
                                ? () {
                                    context.read<DeviceSettingBloc>().add(
                                        AssignRoomEvent(
                                            context: context,
                                            roomId: roomIdSelected,
                                            unit: space!));
                                  }
                                : null,
                            child: BodyMedium(
                              text: 'Save',
                              fontWeight: FontWeight.w700,
                              fontSize: 16,
                              fontColor: canSave
                                  ? ColorsManager.slidingBlueColor
                                  : ColorsManager.primaryTextColor,
                            ),
                          );
                        },
                      ),
                      const SizedBox(width: 20),
                    ],
                    child: ListView(
                      shrinkWrap: true,
                      padding: const EdgeInsets.symmetric(vertical: 20),
                      children: [
                        const BodyMedium(
                          text: 'Smart Device Location',
                          fontWeight: FontWeight.w700,
                          fontSize: 12,
                          fontColor: ColorsManager.grayColor,
                        ),
                        const SizedBox(height: 5),
                        DefaultContainer(
                          padding: const EdgeInsets.all(20),
                          child: ListView.builder(
                            physics: const NeverScrollableScrollPhysics(),
                            shrinkWrap: true,
                            itemCount: _bloc.roomsList.length,
                            itemBuilder: (context, index) {
                              final fromRoom = _bloc.roomsList[index];
                              final isSelected = (state
                                          is OptionSelectedState &&
                                      state.selectedOption == fromRoom.id) ||
                                  (state is! OptionSelectedState &&
                                      fromRoom.id ==
                                          _bloc.deviceInfo.subspace.uuid);

                              return Column(
                                children: [
                                  _buildCheckboxOption(
                                    label: fromRoom.name!,
                                    isSelected: isSelected,
                                    onTap: (label) {
                                      context.read<DeviceSettingBloc>().add(
                                            SelectOptionEvent(
                                              selectedOption: fromRoom.id!,
                                            ),
                                          );
                                      roomIdSelected = fromRoom.id!;
                                    },
                                  ),
                                  if (index < _bloc.roomsList.length - 1) ...[
                                    const SizedBox(height: 10),
                                    const Divider(
                                      color: ColorsManager.dividerColor,
                                    ),
                                    const SizedBox(height: 10),
                                  ],
                                ],
                              );
                            },
                          ),
                        ),
                      ],
                    ),
                  );
          },
        ),
      ),
    );
  }
}

class CircularCheckbox extends StatefulWidget {
  final bool value;
  final ValueChanged<bool?> onChanged;

  const CircularCheckbox(
      {super.key, required this.value, required this.onChanged});

  @override
  _CircularCheckboxState createState() => _CircularCheckboxState();
}

class _CircularCheckboxState extends State<CircularCheckbox> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        widget.onChanged(!widget.value);
      },
      child: Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(
            color: widget.value
                ? ColorsManager.primaryColorWithOpacity.withOpacity(0.01)
                : Colors.grey,
            width: 2.0,
          ),
          color: widget.value
              ? ColorsManager.primaryColorWithOpacity
              : Colors.transparent,
        ),
        width: 24.0,
        height: 24.0,
        child: widget.value
            ? const Icon(
                Icons.check,
                color: Colors.white,
                size: 16.0,
              )
            : null,
      ),
    );
  }
}

Widget _buildCheckboxOption({
  required String label,
  required bool isSelected,
  required Function(String) onTap,
}) {
  return Padding(
    padding: const EdgeInsets.only(bottom: 10, top: 10),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        BodyMedium(
          text: label,
          style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w400),
        ),
        CircularCheckbox(
          value: isSelected,
          onChanged: (bool? value) {
            if (value == true) {
              onTap(label);
            }
          },
        ),
      ],
    ),
  );
}