import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:freekake/components/bottom_navbar.dart';
import 'package:freekake/components/buildcard_info.dart';
import 'package:freekake/components/main_menu.dart';
import 'package:freekake/components/scan_button.dart';
import 'package:flutter_unity_widget/flutter_unity_widget.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
  late UnityWidgetController _unityWidgetController;

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    final isLandscape = size.width > size.height;
    final screenWidth = MediaQuery.of(context).size.width;
    final buttonScanSize = screenWidth * 0.20;
    final double bottomPadding = (9000 / screenWidth).clamp(0, 0.2);
    double bottomOffset = -(screenWidth * 0.25) + 180;
    double sunRiseCurve(double width) {
      // kamu bisa mainin fungsi ini sesuka hati
      return -((400 / width) * 100); // semakin kecil width, hasil makin negatif
    }

    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: UnityWidget(
              onUnityCreated: onUnityCreated,
              //isARScene: true,
              onUnityMessage: onUnityMessage,
              //onUnitySceneLoaded: onUnitySceneLoaded,
              fullscreen: false,
            ),
            // child: Container(
            //   decoration: BoxDecoration(
            //     image: DecorationImage(
            //       image: AssetImage("assets/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('assets/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: -150, //bottomPadding * 32,
            // bottom: sunRiseCurve(
            //   screenWidth,
            // ),
            bottom:
                isLandscape
                    ? bottomOffset.clamp(-200.0, -50.0)
                    : bottomPadding * 55,
            left: (screenWidth - buttonScanSize) / 2,
            child: Transform.translate(
              offset: Offset(0, -30),
              child: ScanButton(),
            ),
          ),
        ],
      ),
    );
  }

  void onUnityCreated(controller) {
    _unityWidgetController = controller;
  }

  void onUnityMessage(message) {
    print('Received message from unity: ${message.toString()}');
  }

  // 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("assets/" + 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;
    }
  }
}