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 'package:flutter_gen/gen_l10n/app_localizations.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 = AppLocalizations.of(context)!.next;
    if (_currentPage == 0) {
      fabText = AppLocalizations.of(context)!.letsGo;
    } else if (_currentPage == 4 - 1) {
      fabText = AppLocalizations.of(context)!.signUp;
    }
    String fabTooltip = AppLocalizations.of(context)!.continueTour;
    if (_currentPage == 0) {
      fabTooltip = AppLocalizations.of(context)!.takeTour;
    } else if (_currentPage == 4 - 1) {
      fabTooltip = AppLocalizations.of(context)!.createNewAccount;
    }

    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(
                    AppLocalizations.of(context)!.welcomeTitle,
                    style: textTheme.displaySmall,
                  ),
                  Text(AppLocalizations.of(context)!.welcomeSubtitle,
                      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(
                    AppLocalizations.of(context)!.page2Title,
                    style: textTheme.displaySmall,
                  ),
                  Text(AppLocalizations.of(context)!.page2Subtitle,
                      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(
                    AppLocalizations.of(context)!.page3Title,
                    style: textTheme.displaySmall,
                  ),
                  Text(AppLocalizations.of(context)!.page3Subtitle,
                      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(
                    AppLocalizations.of(context)!.page4Title,
                    style: textTheme.displaySmall,
                  ),
                  Text(AppLocalizations.of(context)!.page4Subtitle,
                      style: textTheme.bodyMedium)
                ],
              ),
            ],
          )),
          TextButton(
            onPressed: () {
              context.goNamed('signin');
            },
            child: Text(AppLocalizations.of(context)!.userHasAnAccount),
          )
        ],
      ),
      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));
          }
        },
      ),
    );
  }
}