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/nearby/nearby.dart';
import 'package:lba/widgets/button.dart';
import 'package:lba/widgets/datePicker.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: 5,
                  children: [
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const Text("Prefer not to say",
                            style: TextStyle(
                                color: Color.fromARGB(255, 112, 112, 110))),
                        Radio<String>(
                          value: "Prefer not to say",
                          groupValue: selectedGender,
                          activeColor: Colors.blue,
                          onChanged: (value) {
                            setState(() {
                              selectedGender = value!;
                            });
                          },
                        ),
                      ],
                    ),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const Text("Male",
                            style: TextStyle(
                                color: Color.fromARGB(255, 112, 112, 110))),
                        Radio<String>(
                          value: "Male",
                          groupValue: selectedGender,
                          activeColor: Colors.blue,
                          onChanged: (value) {
                            setState(() {
                              selectedGender = value!;
                            });
                          },
                        ),
                      ],
                    ),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const Text("Female",
                            style: TextStyle(
                                color: Color.fromARGB(255, 112, 112, 110))),
                        Radio<String>(
                          value: "Female",
                          groupValue: selectedGender,
                          activeColor: Colors.blue,
                          onChanged: (value) {
                            setState(() {
                              selectedGender = value!;
                            });
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              SizedBox(height: height/12),
              // 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 Nearby()),
                        (route) => false,
                      );
                    }, color: const Color.fromARGB(255, 30, 137, 221),
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  Navigator.pushAndRemoveUntil(
                    context,
                    MaterialPageRoute(builder: (context) => const Nearby()),
                    (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),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}