import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:moving_hole/animprovider.dart';
import 'package:provider/provider.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [ChangeNotifierProvider(create: (_) => AnimProv())],
        child: MaterialApp(
          theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            appBar: AppBar(
              title: Text('Hello, again'),
            ),
            body: Center(
              child: MyWidget(),
            ),
          ),
        ));
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  void initState() {
    AnimProv ap = Provider.of<AnimProv>(context, listen: false);
    ap.foneScreen = 'assets/scrns/scrn1.png';
    // MyTimer(context, true, 10);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(fit: StackFit.expand, children: [
      Consumer<AnimProv>(
          builder: (context, ap, child) => Container(
              height: 360,
              width: 480,
              child: Image(
                image: AssetImage(
                  ap.foneScreen,
                ),
                // fit: BoxFit.contain,
              ))),
      // _getOverlay(),
      // imageOverlay(),
      // textOverlay(),
      // Positioned(
      //     child: Consumer<AnimProv>(
      //         builder: (context, ap, child) =>
      //             RaisedButton(onPressed: () {
      //               ap.width = 300;
      //               ap.height = 150;
      //               ap.alignX = 0;
      //               ap.alignY = -0.5;
      //             })))
    ]);
  }

  void MyTimer(BuildContext context, bool start, int time) async {
    AnimProv ap = Provider.of<AnimProv>(context, listen: false);
    if (start) {
      int t = 0;

      while (t < time) {
        if (t == 0) {
          ap.width = 0;
          ap.height = 0;
          ap.alignX = 0.0;
          ap.alignY = 0;
          ap.picAsset = 'assets/scrns/sign.png';
          ap.foneScreen = 'assets/scrns/scrn1.png';
          ap.message = 'welcome to Magichess quick tutorial ';
        }
        if (t == 3) {
          ap.width = 345;
          ap.height = 170;
          ap.alignX = 0.5;
          ap.alignY = -0.95;
          ap.picAsset = '';
          ap.foneScreen = 'assets/scrns/scrn2.png';
          ap.message = 'In Magichess you can play either online...';
        }
        if (t == 6) {
          ap.width = 345;
          ap.height = 170;
          ap.alignX = 0.5;
          ap.alignY = 0.14;
          ap.foneScreen = 'assets/scrns/scrn3.png';
          ap.message = '... or offline!';
        }

        if (t == 9) {
          ap.width = 345;
          ap.height = 170;
          ap.alignX = 0.5;
          ap.alignY = 0.14;
          ap.foneScreen = 'assets/scrns/scrn4.png';
        }
        await Future.delayed(Duration(seconds: 1));
        t++;
      }
    }
  }

  Widget textOverlay() {
    return Consumer<AnimProv>(
        builder: (context, ap, child) => Container(
              child: Text(ap.message,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold)),
              alignment: Alignment.bottomCenter,
            ));
  }

  Widget imageOverlay() {
    return Consumer<AnimProv>(
        builder: (context, ap, child) => Container(
              child: Image.asset(ap.picAsset, fit: BoxFit.contain),
              width: 400,
              height: 400,
              alignment: Alignment.center,
            ));
  }

  Widget _getOverlay() {
    return ColorFiltered(
      colorFilter: ColorFilter.mode(Colors.black54, BlendMode.srcOut),
      child: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.transparent,
            ),
            child: Consumer<AnimProv>(
              builder: (context, ap, child) => AnimatedAlign(
                duration: Duration(milliseconds: 1000),
                alignment:
                    Alignment(ap.alignX, ap.alignY), // need to animate this
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 1000),
                  margin: const EdgeInsets.only(right: 4, bottom: 4),
                  height: ap.height, // need to animate this
                  width: ap.width, // need to animate this
                  decoration: BoxDecoration(
                    color: Colors.black,
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}