import 'dart:ui';

import 'package:anyway/constants.dart';
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"
  ),
  OnboardingCard(
    title: "Feeling lost?",
    description: "Whenever you are confused or need help with the app, look out for the question mark in the top right corner. Help is just a tap away!",
    imagePath: "assets/confused.svg"
  ),
];

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

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

class _OnboardingPageState extends State<OnboardingPage> {
  final PageController _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              return Stack(
                children: [
                  Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: APP_GRADIENT.colors,
                        stops: [
                          (_controller.hasClients ? _controller.page ?? _controller.initialPage : _controller.initialPage) / onboardingCards.length,
                          (_controller.hasClients ? _controller.page ?? _controller.initialPage + 1 : _controller.initialPage + 1) / onboardingCards.length,
                        ],
                      ),
                    ),
                  ),
                  BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 100, sigmaY: 100),
                    child: Container(
                      color: Colors.black.withOpacity(0),
                    ),
                  ),
                ],
              );
            },
          ),
          PageView(
            controller: _controller,
            children: List.generate(
              onboardingCards.length,
              (index) {
                return Container(
                  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: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            if ((_controller.page ?? _controller.initialPage) == onboardingCards.length - 1) {
              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);
            }
          }
        )
      ),
    );
  }
}