import 'package:flutter/material.dart';
import 'package:flyinsono/lab/color/lab_colors.dart';
import 'package:flyinsono/lab/style/lab_box_decoration.dart';

class TextInputField extends StatefulWidget {
  const TextInputField({
    super.key,
    this.controller,
    this.hintText,
    this.password = false,
    this.onSubmitted,
    this.onChanged,
  });
  final TextEditingController? controller;
  final String? hintText;
  final bool password;
  final Function(String)? onSubmitted;
  final Function(String)? onChanged;

  @override
  State<TextInputField> createState() => _TextInputFieldState();
}

class _TextInputFieldState extends State<TextInputField> {
  final FocusNode focusNode = FocusNode();
  bool _isHover = false;

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    focusNode.addListener(() {
      if (focusNode.hasFocus) {
        setState(() {
          _isHover = false;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    Color bgColor = _isHover ? LabColors.base800 : Colors.white;
    return MouseRegion(
      cursor: SystemMouseCursors.text,
      onEnter: _handleMouseEnter,
      onExit: _handleMouseExit,
      child: GestureDetector(
        onTap: () {
          focusNode.requestFocus();
        },
        child: Container(
          height: 40,
          constraints: BoxConstraints(maxWidth: 320, minWidth: 20),
          padding: EdgeInsets.symmetric(horizontal: 10),
          decoration: LabBoxDecoration.base.copyWith(
            color: bgColor,
            border: Border.all(
              color: LabColors.base400,
              width: 0.5,
            ),
          ),
          child: Row(
            children: [
              Expanded(
                child: Container(
                  height: 28,
                  child: Center(
                    child: TextField(
                      focusNode: focusNode,
                      controller: widget.controller,
                      obscureText: widget.password,
                      obscuringCharacter: '･',
                      scrollPadding: EdgeInsets.all(0),
                      style: TextStyle(
                        fontSize: 14,
                        color: LabColors.base500,
                      ),
                      textAlignVertical: TextAlignVertical.bottom,
                      decoration: InputDecoration(
                        hintStyle: TextStyle(
                          fontSize: 14,
                          color: LabColors.base500,
                        ),
                        isCollapsed: true,
                        contentPadding: EdgeInsets.all(0),
                        hintText: widget.hintText,
                        border: OutlineInputBorder(
                          borderSide: BorderSide.none,
                        ),
                      ),
                      onChanged: widget.onChanged,
                      onSubmitted: widget.onSubmitted,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _handleMouseEnter(PointerEvent details) {
    setState(() {
      _isHover = true;
    });
  }

  void _handleMouseExit(PointerEvent details) {
    setState(() {
      _isHover = false;
    });
  }
}
