import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';

class StatefulTextField extends StatefulWidget {
  const StatefulTextField({
    super.key,
    required this.title,
    this.hintText = 'Please enter',
    required this.width,
    this.elevation,
    required this.controller,
    this.onSubmitted,
    this.boxDecoration,
    this.borderRadius,
    this.height,
    this.padding,
    this.icon,
    this.hintColor,
    required this.onChanged,
  });

  final String title;
  final String hintText;
  final double width;
  final double? elevation;
  final TextEditingController controller;
  final Function? onSubmitted;
  final BoxDecoration? boxDecoration;
  final double? borderRadius;
  final double? height;
  final double? padding;
  final IconData? icon;
  final Color? hintColor;
  final Function(String)? onChanged;

  @override
  State<StatefulTextField> createState() => _StatefulTextFieldState();
}

class _StatefulTextFieldState extends State<StatefulTextField> {
  @override
  void dispose() {
    widget.controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomTextField(
      title: widget.title,
      controller: widget.controller,
      hintText: widget.hintText,
      width: widget.width,
      elevation: widget.elevation,
      onSubmittedFun: widget.onSubmitted,
      boxDecoration: widget.boxDecoration,
      borderRadius: widget.borderRadius,
      height: widget.height,
      padding: widget.padding,
      icon: widget.icon,
      hintColor: widget.hintColor,
      onChanged: widget.onChanged,
    );
  }
}

class CustomTextField extends StatelessWidget {
  const CustomTextField({
    super.key,
    required this.title,
    required this.controller,
    this.hintText = 'Please enter',
    required this.width,
    this.elevation,
    this.onSubmittedFun,
    this.boxDecoration,
    this.borderRadius,
    this.height,
    this.padding,
    this.icon,
    this.hintColor,
    required this.onChanged,
  });

  final String title;
  final TextEditingController controller;
  final String hintText;
  final double width;
  final double? elevation;
  final Function? onSubmittedFun;
  final BoxDecoration? boxDecoration;
  final double? borderRadius;
  final double? height;
  final double? padding;
  final IconData? icon;
  final Color? hintColor;
  final Function(String)? onChanged;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text(
          title,
          style: context.textTheme.bodyMedium!.copyWith(
            fontSize: 13,
            fontWeight: FontWeight.w600,
            color: const Color(0xff000000),
          ),
        ),
        const SizedBox(height: 8),
        Material(
          elevation: elevation ?? 0,
          borderRadius: BorderRadius.circular(borderRadius ?? 8),
          child: Container(
            width: width,
            height: height ?? 45,
            decoration: boxDecoration ?? containerDecoration,
            child: TextFormField(
              controller: controller,
              style: const TextStyle(color: Colors.black),
              decoration: InputDecoration(
                hintText: hintText,
                hintStyle: TextStyle(
                    fontSize: 12, color: hintColor ?? ColorsManager.blackColor),
                contentPadding: EdgeInsets.symmetric(
                    horizontal: 12, vertical: padding ?? 10),
                border: InputBorder.none,
                suffixIcon: icon != null
                    ? Icon(icon, color: ColorsManager.greyColor)
                    : null,
              ),
              onFieldSubmitted: (_) {
                onSubmittedFun!();
              },
              onChanged: (value) {
                onChanged!(value);
              },
            ),
          ),
        ),
      ],
    );
  }
}