import 'package:balta/pages/account/reset-password.page.dart';
import 'package:balta/pages/account/signup.page.dart';
import 'package:balta/pages/content/course-list.page.dart';
import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = new AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: [0, 0.8],
            colors: [
              Color(0XFFC66CD6),
              Color(0xFF3228B1),
            ],
          ),
        ),
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 60,
            ),
            Container(
              alignment: Alignment.center,
              child: Container(
                height: 128,
                width: 128,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Color(0xFFBABABA),
                  border: Border.all(
                    width: 4.0,
                    color: Color.fromRGBO(255, 255, 255, 0.2),
                  ),
                  borderRadius: BorderRadius.all(
                    Radius.circular(128),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 40,
            ),
            Container(
              padding: EdgeInsets.only(
                left: 20,
              ),
              decoration: BoxDecoration(
                color: Color.fromRGBO(255, 255, 255, 0.1),
                borderRadius: BorderRadius.all(
                  Radius.circular(128),
                ),
              ),
              child: TextFormField(
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  labelText: "CPF",
                  labelStyle: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w100,
                    fontSize: 16,
                  ),
                ),
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Container(
              padding: EdgeInsets.only(left: 20),
              decoration: BoxDecoration(
                color: Color.fromRGBO(255, 255, 255, 0.1),
                borderRadius: BorderRadius.all(
                  Radius.circular(128),
                ),
              ),
              child: TextFormField(
                keyboardType: TextInputType.text,
                obscureText: true,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  labelText: "Senha",
                  labelStyle: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w100,
                    fontSize: 16,
                  ),
                ),
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            StaggerAnimation(controller: _animationController),
            SizedBox(
              height: 20,
            ),
            FlatButton(
              child: Text(
                "Esqueci minha senha",
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => ResetPasswordPage(),
                  ),
                );
              },
            ),
            SizedBox(
              height: 70,
            ),
            FlatButton(
              child: Text(
                "QUERO SER ALUNO",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => SignupPage(),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class StaggerAnimation extends StatelessWidget {
  final AnimationController controller;
  final Animation<double> buttonSizeAnim;
  final Animation<double> buttonOpacityAnim;

  StaggerAnimation({this.controller})
      : buttonSizeAnim = Tween(
          begin: 320.0,
          end: 60.0,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.0, 0.2),
          ),
        ),
        buttonOpacityAnim = Tween(
          begin: 1.0,
          end: 0.0,
        ).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.15, 0.3),
          ),
        );

  Widget _buildAnimation(context, child) {
    return Container(
      height: 60,
      width: buttonSizeAnim.value,
      decoration: BoxDecoration(
        color: Color(0xFFFF508F).withOpacity(buttonOpacityAnim.value),
        borderRadius: BorderRadius.all(
          Radius.circular(128),
        ),
      ),
      child: FlatButton(
        child: Text(
          "Entrar",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        onPressed: () {
          controller.forward();
          // Navigator.push(
          //   context,
          //   MaterialPageRoute(
          //     builder: (context) => CourseListPage(),
          //   ),
          // );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: controller,
    );
  }
}