import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

import 'package:uae_stat/domain/use_cases/language.dart';

class ThemedFormField extends HookWidget {
  const ThemedFormField({
    super.key,
    required this.hintText,
    required this.imgPath,
    required this.controller,
    this.validator,
    this.isObscurable = false,
    this.hintColor,
    this.backgroundColor,
    this.borderColor,
    this.errorBorderColor,
    this.errorTextColor,
  });

  final String hintText;
  final String imgPath;
  final String? Function(String? text)? validator;
  final TextEditingController controller;
  final bool isObscurable;
  final Color? hintColor;
  final Color? backgroundColor;
  final Color? borderColor;
  final Color? errorBorderColor;
  final Color? errorTextColor;

  @override
  Widget build(BuildContext context) {
    final isObscured = useState<bool>(true);
    final boxDecoration = BoxDecoration(
      borderRadius: BorderRadius.circular(10),
      // boxShadow: [
      //   BoxShadow(
      //     offset: const Offset(0, 1),
      //     blurRadius: 2,
      //     color: Colors.black.withOpacity(0.1),
      //   ),
      // ],
    );
    final obscureBtn = IconButton(
      onPressed: () => isObscured.value = !isObscured.value,
      icon: Icon(
        isObscured.value
            ? Icons.visibility_off_outlined
            : Icons.visibility_outlined,
        color: const Color(0xff9EA2A9),
      ),
    );
    final inputDecoration = InputDecoration(
      errorStyle: TextStyle(
        fontFamily: context.translate(
          'Roboto',
          'NotoKufi',
        ),
        color: const Color(0xFFD83731),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(
          color: const Color(0xFFD83731),
          width: 1,
        ),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(
          color: const Color(0xFFD83731),
          width: 1,
        ),
      ),
      filled: true,
      fillColor: backgroundColor ?? Colors.white,
      contentPadding: const EdgeInsets.symmetric(vertical: 14, horizontal: 15),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(
          color: Color(0xFFB68A34),
        ),
      ),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(
          color: Color(0xFFB68A34),
        ),
      ),
      hintText: hintText,
      hintStyle: TextStyle( // ✅ dynamic hint color
        color: const Color(0xFFC3C6CB),
      ),
      prefixIconConstraints: const BoxConstraints(
        maxWidth: 25 + 16 + 10,
        maxHeight: 25 + (8 * 2),
      ),
      prefixIcon: Padding(
        padding: const EdgeInsetsDirectional.only(
          start: 16,
          end: 10,
        ),
        child: Image.asset(
          imgPath,
          fit: BoxFit.fitHeight,
          height: 25,
          width: 25,
          // color: MyTheme.topicColor(IndicatorTopic.economy).shade300,
        ),
      ),
      suffixIcon: isObscurable ? obscureBtn : null,
    );
    return DecoratedBox(
      decoration: boxDecoration,
      child: TextFormField(
        controller: controller,
        decoration: inputDecoration,
        validator: validator,
        obscureText: isObscurable && isObscured.value,
      ),
    );
  }
}