import 'package:flutter/material.dart';
import 'package:frontend/utils/colorOpcity.dart';

import '../utils/auth_utils.dart';

class CustomTextFieldWrapper 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;
  final BorderRadius? borderRadius;
  final Color? layoutColor;
  final bool hasError;

  const CustomTextFieldWrapper({
    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),
    this.borderRadius,
    this.layoutColor,
    this.hasError = false,
  });

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

class _CustomTextFieldWrapperState extends State<CustomTextFieldWrapper> {
  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;
    });
  }

  Color getColorWithOpacity(Color color, double opacity) {
    final int alpha = (opacity * 255).round().clamp(0, 255);
    return Color.fromARGB(
      alpha,
      color.r.toInt(),
      color.g.toInt(),
      color.b.toInt(),
    );
  }

  @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.3
              : MediaQuery.of(context).size.width * 0.88),
      padding: widget.padding,
      decoration: BoxDecoration(
        // color: widget.isFocused
        //     ? (widget.layoutColor ?? widget.color)
        //     : widget.color,
        color: Colors.white,
        borderRadius: widget.borderRadius ?? BorderRadius.circular(8),

        // border: Border.all(
        //   color: widget.isFocused ? layoutColor! : Color(0xFFD6D5E6),
        //   // color: widget.isFocused ? Color(0xFF78B4FC) : Color(0xFFD6D5E6),
        //   width: widget.isFocused ? 1.0 : 0.5,
        // ),
        border: Border.all(
          color:
              widget.hasError
                  ? Colors
                      .red // 👈 show red if error
                  : (widget.isFocused
                      ? layoutColor ??
                          Colors
                              .blue // focused border color
                      : Color(0xFFD6D5E6)), // normal border
          width: widget.hasError ? 1.2 : (widget.isFocused ? 1.0 : 0.5),
        ),

        // boxShadow:
        //     widget.isFocused
        //         ? [
        //           BoxShadow(
        //             color: widget.isFocused ? layoutColor! : Color(0xFFD6D5E6),
        //             // color: widget.isFocused
        //             //     ? (widget.layoutColor ?? Colors.red).withAlpha(204)
        //             //     : Color(0xFFF5F5F5),
        //             blurRadius: 10,
        //             spreadRadius: 1,
        //             offset: Offset(0, 4),
        //           ),
        //         ]
        //         : [],
      ),
      child: widget.child,
    );
  }
}