import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../../extension/screenSize.dart';
import '../../../../gen/assets.gen.dart';
import '../../../../res/colors.dart';
import '../../../../screens/mains/navigation/navigation.dart';
import '../../../../widgets/button.dart';

class UserInfoPage extends StatefulWidget {
  const UserInfoPage({super.key});

  @override
  State<UserInfoPage> createState() => _UserInfoPageState();
}

class _UserInfoPageState extends State<UserInfoPage> {
  DateTime? selectedDate;
  String? selectedGender;

  @override
  Widget build(BuildContext context) {
    final width = context.screenWidth;
    final height = context.screenHeight;
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  IconButton(
                    icon: SvgPicture.asset(Assets.icons.back.path),
                    onPressed: () => Navigator.pop(context),
                  ),
                ],
              ),
              Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 0,
                  vertical: 24,
                ),
                child: Center(
                  child: Padding(
                    padding: const EdgeInsets.only(top: 0),
                    child: SvgPicture.asset(
                      Assets.images.userinfo.path,
                      height: height / 2.9,
                    ),
                  ),
                ),
              ),
              SizedBox(height: height / 20),
              const Padding(
                padding: EdgeInsets.fromLTRB(25, 0, 25, 20),
                child: Text(
                  "what do you like to be called in this application?",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Color.fromARGB(255, 117, 117, 117),
                  ),
                ),
              ),
              const Padding(
                padding: EdgeInsets.fromLTRB(25, 0, 25, 0),
                child: TextField(
                  decoration: InputDecoration(
                    counterText: '',
                    hintText: "Enter here...",
                    hintStyle: TextStyle(
                      fontWeight: FontWeight.normal,
                      color: Colors.grey,
                    ),
                    filled: true,
                    fillColor: Color.fromARGB(255, 250, 250, 250),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(12)),
                      borderSide: BorderSide(
                        color: Color.fromARGB(255, 14, 63, 102),
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(12)),
                      borderSide: BorderSide(color: Colors.grey, width: 2),
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 24),
              const Padding(
                padding: EdgeInsets.fromLTRB(25, 0, 25, 10),
                child: Text(
                  "Gender",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Color.fromARGB(255, 117, 117, 117),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 25),
                child: Wrap(
                  spacing: 3,
                  alignment: WrapAlignment.start,
                  runSpacing: 2,
                  runAlignment: WrapAlignment.start,
                  children: [
                    Directionality(
                      textDirection: TextDirection.rtl,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Radio<String>(
                            value: "Prefer not to say",
                            groupValue: selectedGender,
                            activeColor: Colors.blue,
                            visualDensity: VisualDensity.compact,
                            materialTapTargetSize:
                                MaterialTapTargetSize.shrinkWrap,
                            onChanged: (value) {
                              setState(() {
                                selectedGender = value!;
                              });
                            },
                          ),
                          const Text(
                            "Prefer not to say",
                            style: TextStyle(
                              color: Color.fromARGB(255, 112, 112, 110),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(width: 5,),
                    Directionality(
                      textDirection: TextDirection.rtl,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Radio<String>(
                            value: "Male",
                            groupValue: selectedGender,
                            activeColor: Colors.blue,
                            visualDensity: VisualDensity.compact,
                            materialTapTargetSize:
                                MaterialTapTargetSize.shrinkWrap,
                            onChanged: (value) {
                              setState(() {
                                selectedGender = value!;
                              });
                            },
                          ),
                          const Text(
                            "Male",
                            style: TextStyle(
                              color: Color.fromARGB(255, 112, 112, 110),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(width: 5,),
                    Directionality(
                      textDirection: TextDirection.rtl,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Radio<String>(
                            value: "Female",
                            groupValue: selectedGender,
                            activeColor: Colors.blue,
                            visualDensity: VisualDensity.compact,
                            materialTapTargetSize:
                                MaterialTapTargetSize.shrinkWrap,
                            onChanged: (value) {
                              setState(() {
                                selectedGender = value!;
                              });
                            },
                          ),
                          const Text(
                            "Female",
                            style: TextStyle(
                              color: Color.fromARGB(255, 112, 112, 110),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: height / 8),
              Center(
                child: SizedBox(
                  width: width * 0.9,
                  child: Button(
                    text: "Submit",
                    onPressed: () {
                      Navigator.pushAndRemoveUntil(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const MainScreen(),
                        ),
                        (route) => false,
                      );
                    },
                    color: const Color.fromARGB(255, 30, 137, 221),
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  Navigator.pushAndRemoveUntil(
                    context,
                    MaterialPageRoute(builder: (context) => const MainScreen()),
                    (route) => false,
                  );
                },
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Center(
                    child: InkWell(
                      child: Text(
                        "Skip",
                        style: TextStyle(
                          color: LightAppColors.primary,
                          fontWeight: FontWeight.bold,
                          fontSize: 16,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
