import 'package:english_learning/features/auth/provider/validator_provider.dart';
import 'package:english_learning/core/utils/styles/theme.dart';
import 'package:bootstrap_icons/bootstrap_icons.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ConfirmPasswordFieldWidget extends StatefulWidget {
  final String labelText;
  final String hintText;
  const ConfirmPasswordFieldWidget({
    super.key,
    required this.labelText,
    required this.hintText,
  });

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

class _ConfirmPasswordFieldWidgetState
    extends State<ConfirmPasswordFieldWidget> {
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();

    _focusNode.addListener(() {
      if (!_focusNode.hasFocus) {
        final validatorProvider =
            Provider.of<ValidatorProvider>(context, listen: false);
        validatorProvider.validateField(
            'confirmPassword', validatorProvider.getError('confirmPassword'),
            validator: validatorProvider.confirmPasswordValidator);
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    final validatorProvider = Provider.of<ValidatorProvider>(context);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          widget.labelText,
          style: AppTextStyles.blackTextStyle.copyWith(
            fontSize: 12,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 8),
        TextField(
          focusNode: _focusNode,
          obscureText: validatorProvider.isObscure('confirmPassword'),
          onChanged: (value) {
            validatorProvider.validateField('confirmPassword', value,
                validator: validatorProvider.confirmPasswordValidator);
          },
          decoration: InputDecoration(
            hintText: widget.hintText,
            hintStyle: AppTextStyles.disableTextStyle.copyWith(
              fontSize: 12,
            ),
            suffixIcon: GestureDetector(
              onTap: () =>
                  validatorProvider.toggleVisibility('confirmPassword'),
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 300),
                transitionBuilder: (Widget child, Animation<double> animation) {
                  return ScaleTransition(scale: animation, child: child);
                },
                child: Icon(
                  validatorProvider.isObscure('confirmPassword')
                      ? BootstrapIcons.eye_slash
                      : BootstrapIcons.eye,
                  color: AppColors.greyColor,
                ),
              ),
            ),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: const BorderSide(
                width: 1,
                color: AppColors.disableColor,
              ),
            ),
            errorText: validatorProvider.getError('confirmPassword'),
          ),
        ),
      ],
    );
  }
}
