import 'package:control_style/control_style.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:tanami_app/core/styles/app_images.dart';

import '../../core/styles/app_color.dart';
import '../../core/styles/app_text.dart';
import 'bloc/password_field/password_visibility_bloc.dart';
import 'bloc/password_field/password_visibility_event.dart';
import 'bloc/password_field/password_visibility_state.dart';

class PasswordField extends StatelessWidget {
  final TextEditingController controller;
  final String hintText;
  const PasswordField(
      {super.key, required this.controller, required this.hintText});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<PasswordVisibilityBloc, PasswordVisibilityState>(
      builder: (context, state) {
        return TextFormField(
          validator: (value) {
            if (value != null && value.isEmpty) {
              return AppText.enterPassword;
            }
            return null;
          },
          controller: controller,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          obscureText: !state.isPasswordVisible,
          style: GoogleFonts.dmSans(
            color: AppColor.charcoalColor,
            fontSize: 14,
            fontWeight: FontWeight.w500,
          ),
          decoration: InputDecoration(
            errorStyle: GoogleFonts.dmSans(
              color: AppColor.txtErrorColor,
              fontSize: 14,
              fontWeight: FontWeight.w400,
            ),
            fillColor: AppColor.plainWhite,
            filled: true,
            hintStyle: GoogleFonts.dmSans(
              color: AppColor.hintTextColor,
              fontSize: 15,
              fontWeight: FontWeight.w400,
            ),
            border: DecoratedInputBorder(
              child: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12.0),
                borderSide: const BorderSide(color: AppColor.txtBorderColor),
              ),
              shadow: const [
                BoxShadow(
                  color: AppColor.txtBorderShadowColor,
                  blurRadius: 2,
                  offset: Offset(0, 1),
                  spreadRadius: 0.50,
                )
              ],
            ),
            contentPadding:
                const EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
            errorBorder: DecoratedInputBorder(
              child: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12.0),
                borderSide:
                    const BorderSide(color: AppColor.txtErrorBorderColor),
              ),
              shadow: const [
                BoxShadow(
                  color: AppColor.txtBorderShadowColor,
                  blurRadius: 2,
                  offset: Offset(0, 1),
                  spreadRadius: 0.50,
                )
              ],
            ),
            disabledBorder: DecoratedInputBorder(
              child: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12.0),
                borderSide: const BorderSide(color: AppColor.txtBorderColor),
              ),
              shadow: const [
                BoxShadow(
                  color: AppColor.txtBorderShadowColor,
                  blurRadius: 2,
                  offset: Offset(0, 1),
                  spreadRadius: 0.50,
                )
              ],
            ),
            enabledBorder: DecoratedInputBorder(
              child: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12.0),
                borderSide: const BorderSide(color: AppColor.txtBorderColor),
              ),
              shadow: const [
                BoxShadow(
                  color: AppColor.txtBorderShadowColor,
                  blurRadius: 2,
                  offset: Offset(0, 1),
                  spreadRadius: 0.50,
                )
              ],
            ),
            focusedBorder: DecoratedInputBorder(
              child: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12.0),
                borderSide: const BorderSide(color: AppColor.txtBorderColor),
              ),
              shadow: const [
                BoxShadow(
                  color: AppColor.txtBorderShadowColor,
                  blurRadius: 2,
                  offset: Offset(0, 1),
                  spreadRadius: 0.50,
                )
              ],
            ),
            hintText: hintText,
            suffixIcon: IconButton(
              icon: SvgPicture.asset(
                state.isPasswordVisible
                    ? AppImages.showPassword
                    : AppImages.hidePassword,
              ),
              onPressed: () {
                context
                    .read<PasswordVisibilityBloc>()
                    .add(TogglePasswordVisibility());
              },
            ),
          ),
        );
      },
    );
  }
}
