import 'package:flutter/material.dart';
import '../../../utils/text_style.dart';
import '../../../utils/text_widget.dart';
import 'CustomTextField.dart';

class PasswordSection extends StatelessWidget {
  final bool isVisible;
  final VoidCallback onToggle;
  final TextEditingController oldPasswordController;
  final TextEditingController newPasswordController;
  final TextEditingController confirmPasswordController;
  final double? tm;

  const PasswordSection({
    Key? key,
    required this.isVisible,
    required this.onToggle,
    required this.oldPasswordController,
    required this.newPasswordController,
    required this.confirmPasswordController,
    this.tm,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final wm = MediaQuery.of(context).size.width / 100;
    final hm = MediaQuery.of(context).size.height / 100;

    return Column(
      children: [
        SizedBox(height: hm * 2),
        GestureDetector(
          onTap: onToggle,
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: wm * 5),
            decoration: BoxDecoration(
              color: Colors.grey.shade50,
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: Colors.grey.withOpacity(0.2),
                width: 1,
              ),
            ),
            child: Padding(
              padding: EdgeInsets.symmetric(
                horizontal: wm * 4,
                vertical: hm * 2,
              ),
              child: Row(
                children: [
                  Icon(
                    Icons.lock_outline,
                    color: Colors.grey.shade600,
                    size: 20,
                  ),
                  SizedBox(width: wm * 3),
                  Txt(
                    text: "Change password",
                    style: tS('Inter', 16, FontWeight.w500, Colors.black87),
                  ),
                  const Spacer(),
                  Icon(
                    isVisible
                        ? Icons.keyboard_arrow_up_sharp
                        : Icons.keyboard_arrow_down_sharp,
                    color: Colors.grey.shade600,
                  ),
                ],
              ),
            ),
          ),
        ),
        AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
          height: isVisible ? null : 0,
          child: AnimatedOpacity(
            duration: const Duration(milliseconds: 300),
            opacity: isVisible ? 1.0 : 0.0,
            child: isVisible
                ? Column(
              children: [
                SizedBox(height: hm * 1),
                CustomTextField(
                  controller: oldPasswordController,
                  hintText: 'Old password',
                  obscureText: true,
                  tm: tm,
                ),
                CustomTextField(
                  controller: newPasswordController,
                  hintText: 'New password',
                  obscureText: true,
                  tm: tm,
                ),
                CustomTextField(
                  controller: confirmPasswordController,
                  hintText: 'Confirm password',
                  obscureText: true,
                  tm: tm,
                ),
              ],
            )
                : const SizedBox.shrink(),
          ),
        ),
      ],
    );
  }
}