import 'package:flutter/material.dart';
import 'package:freekake/components/bottom_navbar.dart';
import 'package:freekake/components/buildcard_info.dart';
import 'package:freekake/components/curve_bottom_border_tab.dart';
import 'package:freekake/components/main_menu.dart';
import 'package:freekake/components/scan_button.dart';
import 'package:freekake/components/tab_menu.dart';
import 'package:freekake/components/topbar_container.dart';
import 'package:freekake/screen/collection/collection_caracter_screen.dart';
import 'package:freekake/screen/collection/collection_fragment_screen.dart';
import 'package:freekake/screen/collection/collection_skin_screen.dart';

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

  @override
  State<KoleksiScreen> createState() => _KoleksiScreenState();
}

class _KoleksiScreenState extends State<KoleksiScreen> {
  // static const Color transparent = Color(0xFFFFFFF);

  final PageController _pageController = PageController();
  int _selectedIndex = 0;

  void _onMenuTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    _pageController.animateToPage(
      index,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final buttonScanSize = screenWidth * 0.20;
    final double bottomPadding = (9000 / screenWidth).clamp(0, 0.2);
    return Scaffold(
      extendBody: true,
      body: koleksiBody(bottomPadding, screenWidth, buttonScanSize),
    );
  }

  Stack koleksiBody(
    double bottomPadding,
    double screenWidth,
    double buttonScanSize,
  ) {
    return Stack(
      children: <Widget>[
        Positioned.fill(
          child: Container(color: const Color.fromARGB(255, 255, 255, 255)),
        ),
        Positioned.fill(
          top: 30,
          child: PageView(
            controller: _pageController,
            onPageChanged: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            children: [
              const CollectionCaraterScreen(),
              const CollectionSkinScreen(),
              const CollectionFragmentScreen(),
            ],
          ),
        ),
        // BG MEnu
        Stack(
          children: [
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: SizedBox(height: 85, child: BottomNavbar()),
            ),
          ],
        ),
        //TopBar
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          child: SizedBox(height: 130, child: TopbarContainer()),
        ),

        Positioned(
          top: 10,
          left: 10,
          right: 10,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              BuildcardInfo(
                icon: Icons.person,
                text: 'User01',
                extraIcon: Icons.emoji_events,
                extraText: "5000",
                width: 180,
              ),
              BuildcardInfo(
                icon: Icons.monetization_on,
                text: "1.300",
                width: 90,
              ),
            ],
          ),
        ),
        // Positioned.fill(
        //   top: 30,
        //   child: PageView(
        //     controller: _pageController,
        //     onPageChanged: (index) {
        //       setState(() {
        //         _selectedIndex = index;
        //       });
        //     },
        //     children: [
        //       const CollectionCaraterScreen(),
        //       const CollectionSkinScreen(),
        //       const CollectionFragmentScreen(),
        //     ],
        //   ),
        // ),
        Positioned(
          top: 70,
          left: 10,
          right: 10,
          child: Container(
            // decoration: const BoxDecoration(
            //   borderRadius: BorderRadius.all(Radius.circular(20)),
            //   color: Color.fromARGB(116, 125, 129, 133),
            // ),
            padding: const EdgeInsets.all(1),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                CurvedBottomBorderTab(
                  label: "Karakter",
                  isSelected: _selectedIndex == 0,
                  tap: () => _onMenuTapped(0),
                ),
                CurvedBottomBorderTab(
                  label: "Skin",
                  isSelected: _selectedIndex == 1,
                  tap: () => _onMenuTapped(1),
                ),
                CurvedBottomBorderTab(
                  label: "Fragment",
                  isSelected: _selectedIndex == 2,
                  tap: () => _onMenuTapped(2),
                ),
              ],
            ),
          ),
        ),
        Positioned(bottom: 0, left: 0, right: 0, child: MainMenu()),
        Positioned(
          bottom: bottomPadding * 98,
          left: (screenWidth - buttonScanSize) / 2,
          child: Transform.translate(
            offset: Offset(0, -20),
            child: ScanButton(),
          ),
        ),
      ],
    );
  }
}