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

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

  @override
  State<UserInfo> createState() => _UserInfoState();
}

class _UserInfoState extends State<UserInfo> {
  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),
              // const Padding(
              //   padding: EdgeInsets.fromLTRB(25, 0, 25, 15),
              //   child: Text(
              //     "Birth Date?",
              //     style: TextStyle(
              //       fontWeight: FontWeight.bold,
              //       color: Color.fromARGB(255, 117, 117, 117),
              //     ),
              //   ),
              // ),
              // Padding(
              //   padding: const EdgeInsets.fromLTRB(25, 0, 25, 0),
              //   child: TextField(
              //     readOnly: true,
              //     decoration: InputDecoration(
              //       hintText: selectedDate != null
              //           ? "${selectedDate!.month}/${selectedDate!.day}/${selectedDate!.year}"
              //           : "mm/dd/yyyy",
              //       hintStyle: const TextStyle(
              //           fontWeight: FontWeight.w500, color: Colors.grey),
              //       filled: true,
              //       fillColor: const Color.fromARGB(133, 250, 250, 250),
              //       enabledBorder: const OutlineInputBorder(
              //         borderRadius: BorderRadius.all(Radius.circular(12)),
              //         borderSide:
              //             BorderSide(color: Color.fromARGB(255, 14, 63, 102)),
              //       ),
              //       focusedBorder: const OutlineInputBorder(
              //         borderRadius: BorderRadius.all(Radius.circular(12)),
              //         borderSide: BorderSide(color: Colors.grey, width: 2),
              //       ),
              //       suffixIcon: IconButton(
              //         icon: SvgPicture.asset(Assets.icons.clander.path),
              //         onPressed: () async {
              //           final result = await showModalBottomSheet<DateTime>(
              //             context: context,
              //             builder: (_) => const DatePickerCanvas(),
              //           );
              //           if (result != null) {
              //             setState(() {
              //               selectedDate = result;
              //             });
              //           }
              //         },
              //       ),
              //     ),
              //   ),
              // ),
              // const Padding(
              //   padding: EdgeInsets.fromLTRB(25, 25, 25, 10),
              //   child: Text(
              //     "Interests / Preferences",
              //     style: TextStyle(
              //       fontWeight: FontWeight.bold,
              //       color: Color.fromARGB(255, 117, 117, 117),
              //     ),
              //   ),
              // ),
              // Interests(
              //   icon: Assets.icons.shoppingCart.path,
              //   title: "Shopping & Retail",
              //   options: [
              //     "Fashion & Clothing",
              //     "Electronics & Gadgets",
              //     "Shoes & Accessories"
              //   ],
              // ),
              // const SizedBox(height: 30),
              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,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
