import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:outbag_app/tools/assets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'dart:math';

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

  @override
  State<WelcomePage> createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage> {
  final PageController controller = PageController();
  int _currentPage = 0;

  @override
  void initState() {
    super.initState();

    _currentPage = controller.initialPage;
    controller.addListener(() {
        setState(() {
            _currentPage = controller.page?.toInt() ?? controller.initialPage;
        });
    });
  }

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context)
    .textTheme
    .apply(displayColor: Theme.of(context).colorScheme.onSurface);

    String fabText = "Next";
    if (_currentPage == 0) {
      fabText = "Let's go";
    } else if (_currentPage == 4 - 1) {
      fabText = "Sign up";
    }
    String fabTooltip = "Continue Tour";
    if (_currentPage == 0) {
      fabTooltip = "Take Tour";
    } else if (_currentPage == 4 - 1) {
      fabTooltip = "Create an account";
    }

    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    double smallest = min(width, height);

    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: controller,
              children: <Widget>[
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    SvgPicture.asset(asset("undraw/undraw_shopping_app.svg"),
                      fit: BoxFit.contain,
                      width: smallest * 0.5,
                      height: smallest * 0.5),
                    Text(
                      'Welcome to Outbag',
                      style: textTheme.displaySmall,
                    ),
                    Text('Shopping lists made easy', style: textTheme.bodyMedium)
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    SvgPicture.asset(asset("undraw/undraw_mobile_login.svg"),
                      fit: BoxFit.contain,
                      width: smallest * 0.5,
                      height: smallest * 0.5),
                    Text(
                      'Open. Decentralized',
                      style: textTheme.displaySmall,
                    ),
                    Text('One account, multiple servers',
                      style: textTheme.bodyMedium)
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    SvgPicture.asset(asset("undraw/undraw_online_connection.svg"),
                      fit: BoxFit.contain,
                      width: smallest * 0.5,
                      height: smallest * 0.5),
                    Text(
                      'Made to share',
                      style: textTheme.displaySmall,
                    ),
                    Text('Collaborate on your shopping list in real time',
                      style: textTheme.bodyMedium)
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    SvgPicture.asset(asset("undraw/undraw_online_groceries.svg"),
                      fit: BoxFit.contain,
                      width: smallest * 0.5,
                      height: smallest * 0.5),
                    Text(
                      'Pocket-sized',
                      style: textTheme.displaySmall,
                    ),
                    Text('Always have your shopping list with you',
                      style: textTheme.bodyMedium)
                  ],
                ),
              ],
          )),
          TextButton(
            onPressed: () {
              context.goNamed('signin');
            },
            child: const Text('I already have an account'),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton.extended(
        icon: const Icon(Icons.chevron_right),
        label: Text(fabText),
        tooltip: fabTooltip,
        onPressed: () {
          if (controller.page == 4 - 1) {
            // open signup screen
            context.goNamed('signup');
          } else {
            // move to next page
            controller.nextPage(
              curve: Curves.easeInOut,
              duration: const Duration(milliseconds: 300));
          }
        },
      ),
    );
  }
}