import 'package:flutter/material.dart';
import '../utils/auth_utils.dart';

class CustomTextFieldUserWrapper extends StatefulWidget {
  final Widget child;
  final bool isFocused;
  final bool isDesktop;
  final double? width;
  final Color? color;
  final VoidCallback? onFocusChange; // Callback for focus handling
  final EdgeInsetsGeometry padding;

  const CustomTextFieldUserWrapper({
    super.key,
    required this.child,
    required this.isFocused,
    required this.isDesktop,
    this.width,
    this.color = Colors.white,
    this.onFocusChange,
    this.padding = const EdgeInsets.symmetric(horizontal: 12),
  });

  @override
  _CustomTextFieldUserWrapperState createState() =>
      _CustomTextFieldUserWrapperState();
}

class _CustomTextFieldUserWrapperState
    extends State<CustomTextFieldUserWrapper> {
  Color? layoutColor;

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

    WidgetsBinding.instance.addPostFrameCallback((_) {
      loadInitialData();
    });
  }

  void loadInitialData() async {
    String? layoutString = await getLayoutColor();

    setState(() {
      layoutColor =
      layoutString != null
          ? Color(int.parse(layoutString))
          : Colors.redAccent;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width:
          widget.width ?? // Use custom width if provided, else default
          (widget.isDesktop
              ? MediaQuery.of(context).size.width * 0.25
              : MediaQuery.of(context).size.width * 0.8),
      padding: widget.padding,
      decoration: BoxDecoration(
        color: widget.color,
        // color: Color(0xFFF7F7FB),
        borderRadius: BorderRadius.circular(10),
        border: Border.all(
          color: widget.isFocused ? layoutColor! : Color(0xFFD6D5E6),
          // color: widget.isFocused ? Color(0xFF78B4FC) : Color(0xFFD6D5E6),
          width: widget.isFocused ? 1.0 : 0.5,
        ),
        // boxShadow:
        //     widget.isFocused
        //         ? [
        //           BoxShadow(
        //             color: Color.fromRGBO(120, 180, 252, 0.3),
        //             blurRadius: 10,
        //             spreadRadius: 2,
        //             offset: Offset(0, 4),
        //           ),
        //         ]
        //         : [],
      ),
      child: widget.child,
    );
  }
}