import 'package:fis_theme/theme.dart';
import 'package:fis_ui/base_define/page.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/pages/user/user_device/controller.dart';

class DeviceTabView extends FisView<DeviceController> {
  DeviceTabView({Key? key, required this.businessParent, this.tabTitle, this.index})
      : super(key: key);

  ///父级节点
  final FPage businessParent;

  ///标题
  final String? tabTitle;

  ///位置序号
  final int? index;
  @override
  FWidget build(BuildContext context) {
    final fnIsActive = (Set<MaterialState> states) {
      return states.contains(MaterialState.hovered) ||
          states.contains(MaterialState.pressed) ||
          controller.state.selectIndex == index;
    };
    final borderRadius = const Radius.circular(10);
    final bgColorActive = Colors.white;
    return FContainer(
      height: 36,
      alignment: Alignment.center,
      margin: const EdgeInsets.only(right: 4),
      child: FOutlinedButton(
        name: tabTitle,
        businessParent: businessParent,
        onPressed: () {
          controller.state.selectIndex = index;
        },
        child: FTab(
          child: FText(
            '$tabTitle',
            style: TextStyle(
              color: controller.state.selectIndex != index
                  ? bgColorActive
                  : Colors.black,
            ),
          ),
        ),
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.resolveWith(
            (states) {
              return controller.state.selectIndex == index
                  ? Colors.white
                  : fnIsActive(states)
                      ? FTheme.ins.colorScheme.secondary
                      : FTheme.ins.colorScheme.primary;
            },
          ),
          fixedSize: MaterialStateProperty.all(Size(120, 90)),
          shape: MaterialStateProperty.all(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: borderRadius,
                topRight: borderRadius,
              ),
            ),
          ),
          side: MaterialStateProperty.all(
            BorderSide(color: Color.fromARGB(240, 255, 255, 255)),
          ),
          elevation: MaterialStateProperty.resolveWith(
            (states) => fnIsActive(states) ? 8 : null,
          ),
        ),
      ),
    );
  }
}
