import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/device_managment/gateway/bloc/gate_way_bloc.dart';
import 'package:syncrow_web/pages/device_managment/shared/device_controls_container.dart';
import 'package:syncrow_web/pages/visitor_password/model/device_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

class GateWayControlsView extends StatelessWidget with HelperResponsiveLayout {
  const GateWayControlsView({super.key, required this.gatewayId});

  final String gatewayId;

  @override
  Widget build(BuildContext context) {
    final isExtraLarge = isExtraLargeScreenSize(context);
    final isLarge = isLargeScreenSize(context);
    final isMedium = isMediumScreenSize(context);

    return BlocProvider(
      create: (context) => GateWayBloc()..add(GatWayById(gatewayId)),
      child: BlocBuilder<GateWayBloc, GateWayState>(
        builder: (context, state) {
          if (state is GatewayLoadingState) {
            return const Center(child: CircularProgressIndicator());
          } else if (state is UpdateGatewayState) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 50),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        "Bluetooth Devices:",
                        style: context.textTheme.bodyMedium!.copyWith(
                          color: ColorsManager.grayColor,
                        ),
                      ),
                      const SizedBox(height: 12),
                      Text(
                        "No devices found",
                        style: context.textTheme.bodySmall!.copyWith(
                          color: ColorsManager.blackColor,
                        ),
                      ),
                      const SizedBox(height: 30),
                      Text(
                        "ZigBee Devices:",
                        style: context.textTheme.bodyMedium!.copyWith(
                          color: ColorsManager.grayColor,
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 12),
                GridView.builder(
                  padding: const EdgeInsets.symmetric(horizontal: 50),
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: isLarge || isExtraLarge
                        ? 3
                        : isMedium
                            ? 2
                            : 1,
                    mainAxisExtent: 140,
                    crossAxisSpacing: 12,
                    mainAxisSpacing: 12,
                  ),
                  itemCount: state.list.length,
                  itemBuilder: (context, index) {
                    final device = state.list[index];
                    return _DeviceItem(device: device);
                  },
                ),
              ],
            );
          } else {
            return const Center(child: Text('Error fetching status'));
          }
        },
      ),
    );
  }
}

class _DeviceItem extends StatelessWidget {
  const _DeviceItem({
    required this.device,
  });

  final DeviceModel device;

  @override
  Widget build(BuildContext context) {
    return DeviceControlsContainer(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipOval(
              child: Container(
            height: 60,
            width: 60,
            padding: const EdgeInsets.all(8),
            color: ColorsManager.whiteColors,
            child: SvgPicture.asset(
              device.icon ?? 'assets/icons/gateway.svg',
              width: 35,
              height: 35,
              fit: BoxFit.contain,
            ),
          )),
          const Spacer(),
          Text(
            device.name ?? 'Unknown Device',
            textAlign: TextAlign.start,
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }
}