import 'package:flutter/material.dart';
import 'package:job_app/config/palette.dart';
import 'package:delayed_display/delayed_display.dart';

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key key}) : super(key: key);

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation colorAnimation;
  Animation _heightsizeAnimation;
  Animation _widthsizeAnimation;
  Animation borderAnimation;
  String dropdownValue = 'English';

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

    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 3));

    _heightsizeAnimation = Tween<double>(begin: 0, end: 2000.0)
        .animate(CurvedAnimation(parent: controller, curve: Curves.easeInCirc));
    _widthsizeAnimation = Tween<double>(begin: 0, end: 2000.0)
        .animate(CurvedAnimation(parent: controller, curve: Curves.easeInCirc));

    borderAnimation = Tween<double>(begin: 100, end: 0)
        .animate(CurvedAnimation(parent: controller, curve: Curves.easeInCirc));

    controller.addListener(() {
      setState(() {});
    });

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Palette.primary,
      body: Stack(children: [
        Center(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(borderAnimation.value),
              color: Colors.white,
            ),
            height: _heightsizeAnimation.value,
            width: _widthsizeAnimation.value,
            child: Container(
              child: Image(
                height: 400,
                width: 400,
                image: AssetImage('assets/logo/thejob_logo.png'),
              ),
            ),
          ),
        ),
        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(0, 0, 0, 100),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                DelayedDisplay(
                  delay: Duration(seconds: 4),
                  child: DropdownButton<String>(
                    value: dropdownValue,
                    icon: const Icon(
                      Icons.arrow_downward,
                      color: Palette.primary,
                    ),
                    iconSize: 24,
                    elevation: 16,
                    style: const TextStyle(color: Palette.primary),
                    underline: Container(
                      height: 2,
                      color: Palette.primary,
                    ),
                    onChanged: (String newValue) {
                      setState(() {
                        dropdownValue = newValue;
                        Navigator.pushNamed(context, '/welcome_screen');
                      });
                    },
                    items: <String>['English', 'Français']
                        .map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value),
                        onTap: (){

                        },
                      );
                    }).toList(),
                  ),
                )
              ],
            ),
          )
        ]),
      ]),
    );
  }
}