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';

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

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

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

  @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: homeBody(
        context,
        isLandscape,
        bottomOffset,
        bottomPadding,
        screenWidth,
        buttonScanSize,
      ),
    );
  }

  Stack homeBody(
    BuildContext context,
    bool isLandscape,
    double bottomOffset,
    double bottomPadding,
    double screenWidth,
    double buttonScanSize,
  ) {
    return Stack(
      children: <Widget>[
        Positioned.fill(
          child: RepaintBoundary(
            child: Container(
              decoration: const 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("assets/images/luffy.png", 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(),
          ),
        ),
      ],
    );
  }

  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;
    }
  }
}