import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

import '../../../config/custom_text.dart';
import '../../../utils/colors.dart';
import '../../../widgets/custom_button.dart';

class GenderStep extends StatefulWidget {
  final String? initialValue;
  final Function(String) onChanged;
  final VoidCallback onContinue;

  const GenderStep({
    Key? key,
    required this.initialValue,
    required this.onChanged,
    required this.onContinue,
  }) : super(key: key);

  @override
  _GenderStepState createState() =>
      _GenderStepState(); // Fixed: was *GenderStepState
}

class _GenderStepState extends State<GenderStep> {
  String? selectedGender;
  bool isArabic = false;

  @override
  void initState() {
    super.initState();
    selectedGender = widget.initialValue;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(height: 40),
        Txt(
          text: "your_gender",
          style: TextStyle(
            color: Colors.black,
            fontSize: 28,
            fontFamily: isArabic ? "Readex_Pro" : 'Inter',
            fontWeight: FontWeight.w700,
          ),
        ),
        const SizedBox(height: 8),
        Txt(
          text: "please_select_your_gender",
          style: TextStyle(
            color: const Color(0xFF8C929C),
            fontSize: 16,
            fontFamily: isArabic ? "Readex_Pro" : 'Inter',
            fontWeight: FontWeight.w400,
          ),
        ),
        const SizedBox(height: 48),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GenderOption(
              gender: "female",
              label: "female",
              svgPath: "assets/images/New/Female.svg",
              isSelected: selectedGender == "female",
              onTap: () {
                setState(() {
                  selectedGender = "female";
                });
                widget.onChanged("female");
              },
            ),
            const SizedBox(width: 16),
            GenderOption(
              gender: "male",
              label: "male",
              svgPath: "assets/images/New/Male.svg",
              isSelected: selectedGender == "male",
              onTap: () {
                setState(() {
                  selectedGender = "male";
                });
                widget.onChanged("male");
              },
            ),
          ],
        ),
        const SizedBox(height: 24),
        CustomButton(
          onClick: selectedGender != null ? widget.onContinue : null,
          fontSize: 14,
          width: double.infinity,
          height: 40,
          borderRadius: 10,
          txtColor: AppNewColors.white,
          title: 'Submit',
          backgroundColor: selectedGender != null
              ? AppNewColors.primaryBtnColor
              : AppNewColors.primaryBtnColor.withOpacity(0.5),
          borderColor: selectedGender != null
              ? AppNewColors.primaryBtnColor
              : AppNewColors.primaryBtnColor.withOpacity(0.5),
        ),
      ],
    );
  }
}

// Gender Option Widget
class GenderOption extends StatelessWidget {
  final String gender;
  final String label;
  final String svgPath;
  final bool isSelected;
  final VoidCallback onTap;
  final bool isArabic = false; // Set based on your localization

  const GenderOption({
    Key? key,
    required this.gender,
    required this.label,
    required this.svgPath,
    required this.isSelected,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 134,
        padding: const EdgeInsets.all(20),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          border: Border.all(
            color:
                isSelected ? AppNewColors.primaryColor : AppNewColors.lightgray,
            width: 2,
          ),
        ),
        child: Column(
          children: [
            SizedBox(
              width: 60,
              height: 60,
              child: SvgPicture.asset(
                svgPath,
              ),
            ),
            const SizedBox(height: 12),
            Txt(
              text: label,
              style: TextStyle(
                color: AppNewColors.black,
                //isSelected ? AppNewColors.primaryColor : AppNewColors.black,
                fontSize: 16,
                fontFamily: isArabic ? "Readex_Pro" : 'Inter',
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
      ),
    );
  }
}