import 'package:fis_ui/base_define/page.dart';
import 'package:fis_ui/index.dart';
import 'package:flutter/material.dart';

class IconTabListTestDemo extends FStatefulWidget implements FPage {
  final Map<String, IconData> tabs;

  IconTabListTestDemo(this.tabs);

  @override
  FState<FStatefulWidget> createState() {
    return FIconTabListTestDemoState();
  }

  @override
  String get pageName => "IconTabListTestDemo";
}

class FIconTabListTestDemoState extends FState<IconTabListTestDemo> {
  int _expandedIndex = 0;
  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  FWidget build(BuildContext context) {
    return FMouseRegion(
      onExit: (event) {
        _onExit();
      },
      child: FRow(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          for (int i = 0; i < widget.tabs.length; i++)
            _buildIconTab(
              i,
              _expandedIndex == i,
              _selectedIndex == i,
            ),
        ],
      ),
    );
  }

  FWidget _buildIconTab(int index, bool isExpanded, bool isSelected) {
    return FMouseRegion(
      cursor: SystemMouseCursors.click,
      onHover: (event) {
        _onHoverToIndex(index);
      },
      child: FAnimatedContainer(
        duration: Duration(milliseconds: 300),
        decoration: BoxDecoration(
          color: isSelected ? Colors.blue : Colors.white,
          border: Border.all(color: isSelected ? Colors.blue : Colors.grey),
          borderRadius: BorderRadius.circular(4),
        ),
        child: FInkWell(
          onTap: () {
            setState(() {
              _selectedIndex = index;
            });
          },
          child: FRow(
            children: [
              FContainer(
                  margin: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  child: FIcon(
                    Icons.ac_unit,
                    color: isSelected ? Colors.white : Colors.black54,
                  )),
              if (isExpanded)
                FContainer(
                  margin: EdgeInsets.only(right: 8),
                  child: FText(
                    'image ultrasound',
                    style: TextStyle(
                      color: isSelected ? Colors.white : Colors.black87,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }

  void _onHoverToIndex(int index) {
    if (_expandedIndex == index) {
      return;
    }
    setState(() {
      _expandedIndex = index;
    });
  }

  void _onExit() {
    setState(() {
      _expandedIndex = _selectedIndex;
    });
  }
}
