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_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';

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: gatewayObj.name ?? '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: RefreshIndicator(
                      onRefresh: () async {
                        BlocProvider.of<GatewayBloc>(context)
                            .add(GatewayInitial(gatewayId: gatewayObj.uuid ?? ''));
                      },
                      child: ListView(
                        children: [
                          SizedBox(
                            height: MediaQuery.of(context).size.height,
                            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,
                                          ),
                                        ),
                                      ),
                                    ]),
                                  ),
                                  if (devicesList.isEmpty &&
                                      state is UpdateGatewayState)
                                    Container(
                                      width: MediaQuery.sizeOf(context).width,
                                      alignment: AlignmentDirectional.center,
                                      child: const BodyMedium(
                                        text: 'No devices found',
                                        fontSize: 15,
                                        fontWeight: FontWeight.w700,
                                      ),
                                    ),
                                  if (devicesList.isNotEmpty)
                                    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]);
                                            },
                                          ),
                                        )
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  )));
        }));
  }
}
