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/menu_item.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 = "luffy01";
  // 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;

    return Scaffold(
      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(
          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/cepot-u.png'),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    openWithLongPress: false,
                    items: [
                      ..._MenuItems.firstItems.map(
                        (item) => DropdownMenuItem<MenuItem>(
                          value: item,
                          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/cepott.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:
              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 _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: [
          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;
    }
  }
}