import 'package:fis_i18n/i18n.dart';
import 'package:fis_theme/theme.dart';
import 'package:fis_ui/base_define/page.dart';
import 'package:fis_ui/index.dart';
import 'package:fis_ui/values/font_sizes.dart';
import 'package:fis_ui/values/spacings.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/views/common/device_live/device_live_list/widgets/device_info_card.dart';
import 'package:get/get.dart';

import 'controller.dart';

class DeviceLiveListMobilePage extends FisView<DeviceLiveListMobileController>
    implements FPage {
  @override
  final String pageName = "MobileDeviceLiveListPage";
  ButtonStyle buttonStyle = ButtonStyle(
    fixedSize: MaterialStatePropertyAll(Size(32, 32)),
    padding: MaterialStatePropertyAll(EdgeInsets.all(0)),
  );
  @override
  FWidget build(BuildContext context) {
    return FScaffold(
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        title: FText(
          i18nBook.live.deviceLiveList.t,
          style: TextStyle(
            fontSize: FFontSizes.H6,
          ),
        ),
        leading: FIconButton(
          businessParent: this,
          name: "",
          icon: FIcon(Icons.arrow_back_ios),
          onPressed: () {
            Get.back();
          },
        ),
      ),
      body: FSafeArea(
        child: FContainer(
          child: FColumn(
            children: [
              _buildSearchPanel(),
              const FSizedBox(height: FSpacings.M),
              FExpanded(child: _buildListPanel()),
            ],
          ),
        ),
      ),
    );
  }

  FWidget _buildListPanel() {
    return FObx(() {
      final count = controller.state.deviceList.length;
      return FContainer(
        child: FGridView.builder(
          padding: EdgeInsets.symmetric(horizontal: FSpacings.L),
          controller: controller.listScrollController,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            mainAxisSpacing: FSpacings.M,
            crossAxisSpacing: FSpacings.M,
            crossAxisCount: 2,
          ),
          itemCount: count,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return DeviceInfoCard(index);
          },
        ),
      );
    });
  }

  ///搜索框
  FWidget _buildSearchPanel() {
    return FContainer(
      color: Colors.white,
      margin: EdgeInsets.symmetric(
        horizontal: FSpacings.L,
        vertical: FSpacings.M,
      ),
      child: FRow(
        children: [
          FBorderInput(
            focusNode: controller.searchFocusNode,
            fillColor: Colors.white,
            hintSize: FSpacings.L,
            contentSize: FSpacings.L,
            height: 38,
            maxLength: 50,
            borderColor: FTheme.ins.colorScheme.line,
            suffixIcon: FIconButton(
              name: "SearchInputOfDeviceLive",
              onPressed: () {
                controller.reloadList();
              },
              icon: const FIcon(
                Icons.search,
                size: FFontSizes.H6,
              ),
              businessParent: this,
            ),
            hintText: i18nBook.remedical.searchKeyword.t,
            onChanged: (value) {
              controller.state.searchKeyword = value;
            },
          ),
          FIconButton(
            name: "RefreshOfDeviceLive",
            onPressed: () {
              controller.reloadList();
            },
            icon: const FIcon(
              Icons.refresh,
              color: Colors.grey,
              size: FFontSizes.H3,
            ),
            businessParent: this,
          ),
        ],
      ),
    );
  }
}
