import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_app/features/devices/bloc/gateway_bloc/gateway_bloc.dart';
import 'package:syncrow_app/features/devices/bloc/gateway_bloc/gateway_event.dart';
import 'package:syncrow_app/features/devices/bloc/gateway_bloc/gateway_state.dart';
import 'package:syncrow_app/features/devices/model/device_model.dart';
import 'package:syncrow_app/features/devices/view/widgets/device_appbar.dart';
import 'package:syncrow_app/features/devices/view/widgets/room_page_switch.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/generated/assets.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import 'package:syncrow_app/utils/resource_manager/constants.dart';
import 'package:syncrow_app/utils/resource_manager/font_manager.dart';

class GateWayView extends StatelessWidget {
  final DeviceModel gatewayObj;

  const GateWayView({required this.gatewayObj, super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        create: (context) => GatewayBloc()..add(GatewayInitial(gatewayId: gatewayObj.uuid ?? '')),
        child: BlocBuilder<GatewayBloc, GatewayState>(builder: (context, state) {
          List<DeviceModel> devicesList = [];
          if (state is UpdateGatewayState) {
            devicesList = state.list;
          }
          return AnnotatedRegion(
              value: SystemUiOverlayStyle(
                statusBarColor: ColorsManager.primaryColor.withOpacity(0.5),
                statusBarIconBrightness: Brightness.light,
              ),
              child: Scaffold(
                  backgroundColor: ColorsManager.backgroundColor,
                  extendBodyBehindAppBar: true,
                  extendBody: true,
                  appBar:DeviceAppbar(
                deviceName: 'Gateway',
                deviceUuid: gatewayObj.uuid!,
              ),
                  body: Container(
                    width: MediaQuery.sizeOf(context).width,
                    height: MediaQuery.sizeOf(context).height,
                    padding: const EdgeInsets.all(Constants.defaultPadding),
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(
                          Assets.assetsImagesBackground,
                        ),
                        fit: BoxFit.cover,
                        opacity: 0.4,
                      ),
                    ),
                    child: SafeArea(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            height: MediaQuery.sizeOf(context).height * 0.3,
                            width: MediaQuery.sizeOf(context).width,
                            alignment: AlignmentDirectional.center,
                            child: Stack(children: [
                              SvgPicture.asset(
                                Assets.gatewayIcon,
                                width: 125,
                                height: 125,
                              ),
                              Positioned(
                                right: 30,
                                top: 15,
                                child: Container(
                                  width: 12,
                                  height: 12,
                                  decoration: const BoxDecoration(
                                    color: ColorsManager.lightGreen,
                                    shape: BoxShape.circle,
                                  ),
                                ),
                              ),
                            ]),
                          ),
                          const BodyMedium(
                            text: 'Zigbee Devices',
                            fontSize: 15,
                            fontWeight: FontWeight.w700,
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          state is GatewayLoadingState
                              ? Center(
                                  child: Container(
                                      margin: const EdgeInsets.only(top: 20),
                                      height: 50,
                                      width: 50,
                                      child: const RefreshProgressIndicator()),
                                )
                              : Expanded(
                                  child: GridView.builder(
                                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 2,
                                      crossAxisSpacing: 10,
                                      mainAxisSpacing: 10,
                                      childAspectRatio: 1.5,
                                    ),
                                    padding: const EdgeInsets.only(top: 10),
                                    shrinkWrap: true,
                                    itemCount: devicesList.length,
                                    itemBuilder: (context, index) {
                                      return RoomPageSwitch(device: devicesList[index]);
                                    },
                                  ),
                                )
                        ],
                      ),
                    ),
                  )));
        }));
  }
}