import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:smart_hotel_app/views/report/device/cubit/device_list_cubit.dart';
import 'package:smart_hotel_app/views/report/device/cubit/device_list_state.dart';
import 'package:smart_hotel_app/views/report/device/widget/device_card.dart';
import 'package:smart_hotel_app/views/report/device/widget/device_filter_tab.dart';

@RoutePage()
class ReportDeviceListView extends StatelessWidget {
  const ReportDeviceListView({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => DeviceListCubit(),
      child: BlocBuilder<DeviceListCubit, DeviceListState>(
        builder: (context, state) {
          return Scaffold(
            backgroundColor: const Color.fromRGBO(242, 243, 245, 1),
            appBar: AppBar(
              backgroundColor: Colors.white,
              elevation: 0,
              leading: IconButton(
                icon: const Icon(Icons.arrow_back, color: Colors.black),
                onPressed: () {
                  context.popRoute();
                },
              ),
              title: Text(
                '全部设备',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 18.sp,
                  fontWeight: FontWeight.bold,
                ),
              ),
              centerTitle: true,
            ),
            body: SingleChildScrollView(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 28.w),
                child: Column(
                  children: [
                    SizedBox(height: 10.h),
                    DeviceFilterTab(
                      selectedType: state.selectedType,
                      onSelect: (type) {
                        context.read<DeviceListCubit>().selectType(type);
                      },
                    ),
                    SizedBox(height: 10.h),
                    ...state.filteredDevices.map((device) {
                      return Padding(
                        padding: EdgeInsets.only(bottom: 10.h),
                        child: DeviceCard(device: device),
                      );
                    }).toList(),
                    SizedBox(height: 10.h),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}
