import 'dart:async';

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

import '../../about/internal/application/MeDescription.dart';
import '../../about/internal/application/NavigatorType.dart';
import '../../about/internal/application/TextType.dart';
import '../../configs/Navigator.dart';
import '../../designs/Responsive.dart';
import '../../designs/text/Text.dart';
import '../../utils/Colors.dart';
import '../../utils/Images.dart';
import '../home/Home.dart';
import '../login/Login.dart';
import 'ConnectSplash.dart';
import 'Splash.dart';
import 'ViewSplash.dart';

class SplashState extends State<Splash> implements ConnectSplash {
  ViewSplash? _model;

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<ViewSplash>.reactive(
      viewModelBuilder: () => ViewSplash(context, this),
      onViewModelReady: (viewModel) {
        _model = viewModel;
        _initiate();
      },
      builder: (context, viewModel, child) => PopScope(
        canPop: false,
        child: Scaffold(
          backgroundColor: colorPrimaryDark,
          body: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              return Responsive(
                mobile: _mobileView(constraints),
                tablet: _mobileView(constraints),
                desktop: _mobileView(constraints),
              );
            },
          ),
        ),
      ),
    );
  }

  Future<void> _initiate() async {
    // A beat on the wordmark, then the session decides where we land.
    await Future.delayed(const Duration(milliseconds: 900));
    _model?.initialize();
  }

  Widget _mobileView(BoxConstraints constraints) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 36),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            text("GROUNDED", 10, TextType.Bold,
                color: colorWhite.withValues(alpha: 0.45), letterSpacing: 2.0),
            Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // The same mark the native splash shows, so the handover from
                // the OS screen into the app is invisible.
                Image.asset(
                  splashMark,
                  width: 108,
                  height: 108,
                  errorBuilder: (context, error, stackTrace) =>
                      const SizedBox(height: 108),
                ),
                const SizedBox(height: 28),
                text("Grounded", 52, TextType.Light,
                    color: colorWhite, height: 1.05),
                const SizedBox(height: 16),
                Container(
                  width: 44,
                  height: 2,
                  color: colorWhite.withValues(alpha: 0.30),
                ),
                const SizedBox(height: 20),
                text(
                  "A to-do app that does not believe you.",
                  15,
                  TextType.Regular,
                  color: colorWhite.withValues(alpha: 0.60),
                  height: 1.5,
                ),
              ],
            ),
            SizedBox(
              width: 22,
              height: 22,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                backgroundColor: colorWhite.withValues(alpha: 0.12),
                color: colorWhite.withValues(alpha: 0.70),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void launchHome(MeDescription value) {
    GroundedNavigation()
        .navigateToPage(NavigatorType.makeNewMain, const Home(), context);
  }

  @override
  void launchLogin() {
    GroundedNavigation()
        .navigateToPage(NavigatorType.makeNewMain, const Login(), context);
  }
}