import 'package:flutter/material.dart';
import 'package:flyinsono/lab/color/lab_colors.dart';
import 'package:fis_common/index.dart';

class TabItem extends StatefulWidget {
  const TabItem({
    super.key,
    required this.index,
    required this.isActive,
    required this.onTap,
    this.onClose,
    this.text,
    this.isCenterText = true,
  });

  final int index;
  final bool isActive;
  final bool isCenterText;
  final String? text;
  final VoidCallback onTap;
  final VoidCallback? onClose;

  @override
  State<TabItem> createState() => _TabItemState();
}

class _TabItemState extends State<TabItem> {
  bool _isHover = false;
  bool _isHoverClose = false;
  EdgeInsetsGeometry get innerPadding => widget.onClose == null
      ? const EdgeInsets.only(left: 30, right: 30)
      : const EdgeInsets.only(left: 20, right: 10);

  @override
  Widget build(BuildContext context) {
    if (widget.text.isNullOrEmpty) {
      return SizedBox();
    }
    Color backgroundColor =
        widget.isActive ? LabColors.base300 : LabColors.tabBarButtonColor;
    if (_isHover) {
      backgroundColor =
          widget.isActive ? LabColors.base300 : LabColors.hoverButtonColor;
    }
    Color closeBackgroundColor = Colors.transparent;
    if (_isHoverClose) {
      closeBackgroundColor =
          widget.isActive ? LabColors.base400 : LabColors.base800;
    }
    Color closeColor = widget.isActive ? LabColors.base800 : Colors.transparent;
    if (_isHover) {
      closeColor = widget.isActive ? LabColors.base800 : LabColors.base300;
    }
    return Padding(
      padding: const EdgeInsets.only(left: 5, right: 5, top: 5),
      child: MouseRegion(
        onEnter: (event) => setState(() => _isHover = true),
        onExit: (event) => setState(() => _isHover = false),
        cursor: SystemMouseCursors.click,
        child: GestureDetector(
          onTap: widget.onTap,
          child: Container(
            height: double.infinity,
            padding: innerPadding,
            decoration: BoxDecoration(
              color: backgroundColor,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(3),
                topRight: Radius.circular(3),
              ),
            ),
            child: Row(
              mainAxisAlignment: widget.isCenterText
                  ? MainAxisAlignment.center
                  : MainAxisAlignment.start,
              children: [
                Text(
                  widget.text!,
                  style: TextStyle(
                    color:
                        widget.isActive ? LabColors.text800 : LabColors.text300,
                    fontSize: 24,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                if (widget.onClose != null)
                  const SizedBox(
                    width: 10,
                  ),
                if (widget.onClose != null)
                  MouseRegion(
                    onEnter: (event) => setState(() => _isHoverClose = true),
                    onExit: (event) => setState(() => _isHoverClose = false),
                    child: GestureDetector(
                      onTap: widget.onClose,
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(3)),
                          color: closeBackgroundColor,
                        ),
                        child: Icon(
                          Icons.close,
                          size: 24,
                          color: closeColor,
                        ),
                      ),
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
