import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:{{ name }}/style/style.dart';

class AuthWalktrought extends StatefulWidget {
  @override
  State<AuthWalktrought> createState() => _AuthWalktroughtState();
}

class _AuthWalktroughtState extends State<AuthWalktrought> {
  final int _numPages = 3;
  final PageController _pageController = PageController(initialPage: 0);
  int _currentPage = 0;

  List<Widget> _buildPageIndicator() {
    List<Widget> list = [];
    for (int i = 0; i < _numPages; i++) {
      list.add(i == _currentPage ? _indicator(true) : _indicator(false));
    }
    return list;
  }

  Widget _indicator(bool isActive) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 150),
      margin: EdgeInsets.symmetric(horizontal: 8.0),
      height: 8.0,
      width: 8.0,
      decoration: BoxDecoration(
        color: isActive ? Color(0xff182779) : Color(0xFFd1d4e4),
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    );
  }

  @override
  void initState(){
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
  }

  @override
  dispose(){
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          color: const Color(0xFFFFFFFF),
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 40.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                alignment: Alignment.centerRight,
                child: FlatButton(
                  onPressed: () => Navigator.pushNamed(context, '/login'),
                  child: Text(
                    'Skip Tour',
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 12.0
                      )
                    )
                )
              ),
              Container(
                height:500.0,
                child: PageView(
                  physics: ClampingScrollPhysics(),
                  controller: _pageController,
                  onPageChanged: (int page) {
                    setState(() {
                      _currentPage = page;
                    });
                  },
                  children: <Widget>[
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 40.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/walk_01.png'
                                ),
                              )
                            ),
                            SizedBox(height: 10.0),
                            Text(
                              'Contact via Message',
                              style: TextStyle(
                                  color: Color(0xff182779),
                                  fontFamily: 'CM Sans Serif',
                                  fontWeight: FontWeight.bold,
                                  fontSize: 26.0,
                                  height: 1.5,
                              )
                            ),
                            SizedBox(height: 15.0),
                            Text(
                              'Step by step instructions to create a job search website on your own in',
                              textAlign: TextAlign.center,
                              style: kSubtitleStyle,
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 40.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/walk_02.png'
                                ),
                              )
                            ),
                            SizedBox(height: 10.0),
                            Text(
                              'Oportunities near you',
                              style: TextStyle(
                                  color: Color(0xff182779),
                                  fontFamily: 'CM Sans Serif',
                                  fontWeight: FontWeight.bold,
                                  fontSize: 26.0,
                                  height: 1.5,
                              )
                            ),
                            SizedBox(height: 15.0),
                            Text(
                              'Step by step instructions to create a job search website on your own in',
                              textAlign: TextAlign.center,
                              style: kSubtitleStyle,
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 40.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Center(
                              child: Image(
                                image: AssetImage(
                                  'assets/images/walk_03.png'
                                ),
                              )
                            ),
                            SizedBox(height: 10.0),
                            Text(
                              'Post Jobs',
                              style: TextStyle(
                                  color: Color(0xff182779),
                                  fontFamily: 'CM Sans Serif',
                                  fontWeight: FontWeight.bold,
                                  fontSize: 26.0,
                                  height: 1.5,
                              )
                            ),
                            SizedBox(height: 15.0),
                            Text(
                              'Step by step instructions to create a job search website on your own in',
                              textAlign: TextAlign.center,
                              style: kSubtitleStyle,
                            ),
                          ],
                        ),
                      )
                    ]
                  )
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: _buildPageIndicator(),
              ),
               _currentPage != _numPages - 1
                  ? Expanded(
                      child: Align(
                        alignment: FractionalOffset.bottomRight,
                        child: FlatButton(
                          onPressed: () {
                            _pageController.nextPage(
                              duration: Duration(milliseconds: 500),
                              curve: Curves.ease,
                            );
                          },
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Text(
                                'Next',
                                style: TextStyle(
                                  color: Color(0xff182779),
                                  fontSize: 22.0,
                                ),
                              ),
                              SizedBox(width: 10.0),
                              Icon(
                                Icons.arrow_forward,
                                color: Color(0xff182779),
                                size: 30.0,
                              ),
                            ],
                          ),
                        ),
                      ),
                    )
                  : Text(''),
            ]
          ),
        ),
      ),
      bottomSheet: _currentPage == _numPages - 1
          ? Container(
            color: Colors.white,
            height: 150.0,
            width: double.infinity,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 45.0),
              child: CupertinoButton(
                    onPressed: () {
                      Navigator.pushNamed(context, '/login');
                    },
                    child: Text(
                      'Get starter',
                      style: TextStyle(
                              color: Colors.white,
                              fontSize: 18.0,
                              fontWeight: FontWeight.bold,
                            ),
                      ),
                    color: Color(0xff0251ff),
                    borderRadius: BorderRadius.all(Radius.circular(16)),
                  ),
            ),
          )
          : Text(''),
    );
  }
}