import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:vitalapp/components/alert_dialog.dart';

import 'controller.dart';
import 'widgets/device_card.dart';
import 'widgets/search_dialog.dart';

class DevicesSettingPage extends GetView<DevicesSettingController> {
  const DevicesSettingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.grey.shade200,
      alignment: Alignment.topCenter,
      padding: const EdgeInsets.all(12),
      child: _buildListView(),
    );
  }

  Widget _buildListView() {
    return Obx(() {
      final deviceList = controller.state.deviceList;
      List<String> types = List.from(controller.state.accessTypes);
      types.sort((a, b) {
        return deviceList.any((e) => e.type == b) ? 1 : 0;
      });
      final children = types.map((e) {
        final data = controller.getDataByType(e);
        return DeviceCard(
          type: e,
          data: data,
          onTapChangeBind: (value) {
            if (value) {
              _onDeviceBind(e);
            } else {
              _onDeviceUnbind(e);
            }
          },
        );
      }).toList();
      return SingleChildScrollView(
        child: StaggeredGrid.count(
          axisDirection: AxisDirection.down,
          crossAxisCount: 2,
          mainAxisSpacing: 16,
          crossAxisSpacing: 16,
          children: children,
        ),
      );
    });
  }

  void _onDeviceBind(String type) async {
    // await controller.initPermission();
    final result = await DeviceSearchDialog.dialog(type);
    if (result != null) {
      controller.bindDevice(result);
    }
  }

  void _onDeviceUnbind(String type) {
    // TODO: 用confirm组件替换
    Get.dialog(
      VAlertDialog(
        title: "提示",
        width: 260,
        content: Container(
          height: 32,
          padding: const EdgeInsets.symmetric(horizontal: 24),
          alignment: Alignment.center,
          child: const Text(
            "确定解除此设备的绑定？",
            style: TextStyle(fontSize: 20),
          ),
        ),
        onConfirm: () {
          Get.back();
          controller.unbindDevice(type);
        },
      ),
      barrierDismissible: false,
      barrierColor: Colors.black.withOpacity(.4),
    );
  }
}