import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:furibase/components/bottom_navbar.dart';
import 'package:furibase/components/buildcard_info.dart';
import 'package:furibase/components/main_menu.dart';
import 'package:furibase/components/scan_button.dart';
import 'package:furibase/components/topbar_container.dart';

class HomeScreen extends StatefulWidget {
  HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final String username = "User01";
  double _sliderValue = 0.0;
  static const Color transparent = Color(0xFFFFFFFF);
  // Image image

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      // appBar: AppBar(
      //   elevation: 0,
      //   backgroundColor: Color(0x00000000),
      //   title: Row(
      //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
      //     children: [
      //       Row(
      //         children: [
      //           Text(
      //             username,
      //             style: const TextStyle(
      //               fontSize: 18,
      //               fontWeight: FontWeight.bold,
      //             ),
      //           ),
      //           SizedBox(width: 10),
      //           IconButton(
      //             icon: Icon(Icons.emoji_events, color: Color(0xFFE32087)),
      //             onPressed: () {},
      //           ),
      //           Text(
      //             "5000",
      //             style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      //           ),
      //         ],
      //       ),
      //       Row(
      //         children: [
      //           IconButton(
      //             icon: Icon(Icons.monetization_on, color: Color(0xFFE32087)),
      //             onPressed: () {},
      //           ),
      //           Text(
      //             "1.300",
      //             style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      //           ),
      //           // IconButton(
      //           //   icon: Image.asset("images/icon.png", width: 24),
      //           //   onPressed: () {},
      //           // ),
      //         ],
      //       ),
      //     ],
      //   ),
      // ),
      body: Stack(
        children: <Widget>[
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("images/background.jpeg"),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          // Positioned(
          //   top: 0,
          //   left: 0,
          //   right: 0,
          //   child: SizedBox(height: 120, child: TopbarContainer()),
          // ),
          Positioned(
            right: 0,
            top: 100,
            child: Padding(
              padding: EdgeInsets.only(right: 20),
              child: Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(1),
                  color: Color.fromARGB(1, 209, 174, 174).withAlpha(0),
                ),
                child: Center(
                  child: DropdownButtonHideUnderline(
                    child: DropdownButton2(
                      customButton: Container(
                        height: 50,
                        width: 50,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          image: const DecorationImage(
                            image: AssetImage('images/luffy-u.png'),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      openWithLongPress: false,
                      items: [
                        ..._MenuItems.firstItems.map(
                          (item) => DropdownMenuItem<_MenuItem>(
                            value: item,
                            child: _MenuItems.buildItem(item),
                          ),
                        ),
                        // const DropdownMenuItem<Divider>(
                        //   enabled: false,
                        //   // height: 8,
                        //   child: Divider(),
                        // ),
                        // ..._MenuItems.secondItems.map(
                        //   (item) => DropdownMenuItem<_MenuItem>(
                        //     value: item,
                        //     // height: 48,
                        //     child: _MenuItems.buildItem(item),
                        //   ),
                        // ),
                      ],
                      onChanged: (value) {
                        if (value != null) {
                          _MenuItems.onChanged(context, value);
                        } else {
                          print("null");
                        }
                      },
                      buttonStyleData: ButtonStyleData(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(40),
                        ),
                      ),
                      dropdownStyleData: DropdownStyleData(
                        width: 140,
                        padding: EdgeInsets.zero,
                        maxHeight: 150,
                        // padding: const EdgeInsets.symmetric(vertical: 6),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          color: Color.fromRGBO(2, 104, 17, 1).withAlpha(50),
                        ),
                        offset: const Offset(40, -4),
                      ),
                      menuItemStyleData: MenuItemStyleData(
                        height: 35,
                        padding: EdgeInsets.symmetric(horizontal: 10),
                      ),
                      // menuItemStyleData: const MenuItemStyleData(
                      //   padding: EdgeInsets.only(left: 16, right: 16),
                      // ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          Positioned(
            top: 10,
            left: 10,
            right: 10,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                BuildcardInfo(
                  icon: Icons.person,
                  text: username,
                  extraIcon: Icons.emoji_events,
                  extraText: "5000",
                  width: 180,
                ),
                BuildcardInfo(
                  icon: Icons.monetization_on,
                  text: "1.300",
                  width: 90,
                ),
              ],
            ),
          ),
          Positioned(
            bottom: 150,
            left: 0,
            right: 0,
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  decoration: BoxDecoration(
                    color: Color.fromARGB(255, 247, 224, 236),
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: [
                      BoxShadow(
                        color: Color.fromARGB(255, 214, 213, 121),
                        blurRadius: 5,
                        spreadRadius: 2,
                      ),
                    ],
                  ),
                  child: Text(
                    "Halo....Jotaslim",
                    style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFF000000),
                    ),
                  ),
                ),
                SizedBox(height: 10),
                setHomeImage("images/luffy.png", 300),
                // Image.asset("images/luffy.png", width: 300),
              ],
            ),
          ),
          // BG MEnu
          Stack(
            children: [
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: SizedBox(height: 85, child: BottomNavbar()),
              ),
            ],
          ),
          Positioned(bottom: 0, left: 0, right: 0, child: MainMenu()),
          Positioned(
            bottom: 1,
            left: MediaQuery.of(context).size.width / 2 - 48,
            child: Transform.translate(
              offset: Offset(0, -20),
              child: ScanButton(),
            ),
          ),
        ],
      ),
    );
  }

  // Widget _menuButton(String label, Widget icon) {
  //   return Expanded(
  //     child: Column(
  //       children: [
  //         IconButton(
  //           // icon: Icon(icon, color: Color.fromARGB(255, 179, 161, 170)),
  //           icon: icon,
  //           onPressed: () {},
  //         ),
  //         Text(
  //           label,
  //           style: TextStyle(
  //             color: Color.fromARGB(255, 239, 224, 232),
  //             fontWeight: FontWeight.bold,
  //           ),
  //         ),
  //       ],
  //     ),
  //   );
  // }

  // Widget _scanButton() {
  //   return Expanded(
  //     child: Container(
  //       decoration: BoxDecoration(shape: BoxShape.circle, color: transparent),
  //       padding: EdgeInsets.all(10),
  //       child: IconButton(
  //         icon: SvgPicture.asset(
  //           'icons/Scan.svg',
  //           width: 60,
  //           height: 60,
  //           colorFilter: ColorFilter.mode(Color(0xFFFFFFFF), BlendMode.srcIn),
  //         ),
  //         onPressed: () {},
  //       ),
  //     ),
  //   );
  // }

  Widget setHomeImage(String src, double size) {
    return Image.asset(src, width: size);
  }
}

class _MenuItem {
  const _MenuItem({required this.text, required this.icon});
  final String text;
  final IconData icon;
}

class _MenuItems {
  static const List<_MenuItem> firstItems = [like, share, download];
  static const List<_MenuItem> secondItems = [cancel];
  static const like = _MenuItem(text: 'Like', icon: Icons.favorite);
  static const share = _MenuItem(text: 'Share', icon: Icons.share);
  static const download = _MenuItem(text: 'Download', icon: Icons.download);
  static const cancel = _MenuItem(text: 'Cancel', icon: Icons.cancel);

  static Widget buildItem(_MenuItem item) {
    return Container(
      height: 30,
      padding: EdgeInsets.symmetric(vertical: 2),
      alignment: Alignment.centerLeft,
      child: Row(
        children: [
          // Icon(item.icon, color: Color.fromRGBO(242, 240, 240, 1), size: 22),
          // const SizedBox(width: 10),
          Expanded(
            child: Text(
              item.text,
              style: const TextStyle(color: Color.fromRGBO(253, 252, 252, 1)),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    );
  }

  static void onChanged(BuildContext context, _MenuItem item) {
    switch (item) {
      case _MenuItems.like:
        //Do something
        break;
      case _MenuItems.share:
        //Do something
        break;
      case _MenuItems.download:
        //Do something
        break;
      case _MenuItems.cancel:
        //Do something
        break;
    }
  }
}