import 'package:coffedryer/page/profile_page.dart';
import 'package:flutter/material.dart';
import 'home_page.dart';
import 'history_page.dart';

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

  @override
  State<DashboardPage> createState() =>
      _DashboardPageState();
}

class _DashboardPageState
    extends State<DashboardPage> {

  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const HistoryPage(),
    const ProfilePage(),
  ];

  void onItemTapped(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  Widget navItem({
    required IconData icon,
    required String label,
    required int index,
  }) {

    bool isSelected = selectedIndex == index;

    return GestureDetector(
      onTap: () {
        onItemTapped(index);
      },

      child: AnimatedContainer(
        duration:
        const Duration(milliseconds: 350),

        curve: Curves.easeInOut,

        padding: EdgeInsets.symmetric(
          horizontal: isSelected ? 18 : 12,
          vertical: 10,
        ),

        decoration: BoxDecoration(
          color: isSelected
              ? Colors.white
              : Colors.transparent,

          borderRadius:
          BorderRadius.circular(30),

          boxShadow: isSelected
              ? [
            BoxShadow(
              color: Colors.black
                  .withOpacity(0.12),
              blurRadius: 10,
              offset: const Offset(0, 4),
            ),
          ]
              : [],
        ),

        child: Row(
          children: [

            AnimatedScale(
              duration:
              const Duration(milliseconds: 300),

              scale: isSelected ? 1.15 : 1,

              child: Icon(
                icon,
                color: isSelected
                    ? const Color(0xFF6D4C41)
                    : Colors.white70,
                size: 26,
              ),
            ),

            AnimatedSize(
              duration:
              const Duration(milliseconds: 300),

              curve: Curves.easeInOut,

              child: isSelected
                  ? Row(
                children: [

                  const SizedBox(width: 8),

                  Text(
                    label,

                    style: const TextStyle(
                      color:
                      Color(0xFF6D4C41),
                      fontWeight:
                      FontWeight.bold,
                      fontSize: 15,
                    ),
                  ),
                ],
              )
                  : const SizedBox(),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor:
      const Color(0xFFF6F1EE),

      body: AnimatedSwitcher(
        duration:
        const Duration(milliseconds: 400),

        switchInCurve: Curves.easeInOut,
        switchOutCurve: Curves.easeInOut,

        transitionBuilder:
            (child, animation) {

          return FadeTransition(
            opacity: animation,

            child: SlideTransition(
              position: Tween<Offset>(
                begin:
                const Offset(0.05, 0),
                end: Offset.zero,
              ).animate(animation),

              child: child,
            ),
          );
        },

        child: Container(
          key: ValueKey(selectedIndex),
          child: pages[selectedIndex],
        ),
      ),

      bottomNavigationBar: Container(
        margin: const EdgeInsets.all(18),

        padding: const EdgeInsets.symmetric(
          horizontal: 12,
          vertical: 10,
        ),

        decoration: BoxDecoration(
          color: const Color(0xFF6D4C41),

          borderRadius:
          BorderRadius.circular(35),

          boxShadow: [
            BoxShadow(
              color:
              Colors.black.withOpacity(0.15),
              blurRadius: 15,
              offset: const Offset(0, 8),
            ),
          ],
        ),

        child: Row(
          mainAxisAlignment:
          MainAxisAlignment.spaceAround,

          children: [

            navItem(
              icon: Icons.home_rounded,
              label: "Home",
              index: 0,
            ),

            navItem(
              icon: Icons.history_rounded,
              label: "Riwayat",
              index: 1,
            ),

            navItem(
              icon: Icons.person_rounded,
              label: "Profile",
              index: 2,
            ),
          ],
        ),
      ),
    );
  }
}