import 'package:anyway/modules/onboarding_card.dart';
import 'package:anyway/pages/new_trip_location.dart';
import 'package:flutter/material.dart';


const List<Widget> onboardingCards = [
  OnboardingCard(
    title: "Welcome to anyway!",
    description: "Anyway helps you plan a city trip that suits your wishes.",
    imagePath: "assets/city.svg"
  ),
  OnboardingCard(
    title: "Find your way",
    description: "Bored by churches? No problem! Hate shopping? No worries! Instead of suggesting the generic trips that bore you, anyway will try to give you recommendations that really suit you.",
    imagePath: "assets/plan.svg"
  ),
  OnboardingCard(
    title: "Change your mind",
    description: "Feet get sore, the weather changes. Anyway understands that! Move or remove destinations, visit hidden gems along your journey, do your own thing. Anyway adapts to your spontaneous decisions.",
    imagePath: "assets/cat.svg"
  ),
];


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

  @override
  State<OnboardingPage> createState() => _OnboardingPageState();
}

class _OnboardingPageState extends State<OnboardingPage> {
  @override
  Widget build(BuildContext context) {
    final PageController _controller = PageController();

    return Scaffold(
      body: Stack(
        children: [
          // horizontally scrollable list of pages
          PageView(
            controller: _controller,
            
            children: List.generate(
              onboardingCards.length,
              (index) {
                Color currentColor = Colors.red.withAlpha(Colors.red.alpha - index * 30);
                return Container(
                  color: currentColor,
                  alignment: Alignment.center,
                  child: onboardingCards[index],
                );
              }
            )
          ),
        ],
      ),

      floatingActionButton: FloatingActionButton.extended(
         onPressed: () {
            if (_controller.page == onboardingCards.length - 1) {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const NewTripPage()
                )
              );
            } else {
              _controller.nextPage(duration: Duration(milliseconds: 500), curve: Curves.ease);
            }
          },
          label: ListenableBuilder(
            listenable: _controller,
            builder: (context, child) {
              if (_controller.page == onboardingCards.length - 1) {
                // icon and text side by side
                return Row(
                  children: [
                    const Text("Start planning!"),
                    Padding(padding: const EdgeInsets.only(right: 8.0)),
                    const Icon(Icons.map_outlined)
                  ],
                );

              } else {
                return const Icon(Icons.arrow_forward);
              }
            }
          )
      ),
    );
  }
}