import 'dart:async';

import 'package:fcs/model/main_model.dart';
import 'package:fcs/model/shared_pref.dart';
import 'package:fcs/vo/user.dart';
import 'package:flutter/material.dart';
import 'package:pin_input_text_field/pin_input_text_field.dart';
import 'package:provider/provider.dart';

import '../theme/theme.dart';
import '../theme/theme.dart';
import '../widget/local_text.dart';
import '../widget/progress.dart';
import 'user_edit.dart';

const resend_count_sec = 5;

class CodePage extends StatefulWidget {
  final String phoneNumber;
  const CodePage({Key key, this.phoneNumber}) : super(key: key);
  @override
  _CodePageState createState() => _CodePageState();
}

class _CodePageState extends State<CodePage> {
  bool _isLoading = false;
  String pin;
  bool allNumberEntered;
  Timer _timer;
  int _start = resend_count_sec;
  bool canResend = false;

  @override
  void initState() {
    pin = "";
    allNumberEntered = false;
    super.initState();
    startTimer();
  }

  void startTimer() {
    _timer = new Timer.periodic(
      Duration(seconds: 1),
      (t) => setState(
        () {
          if (_start < 1) {
            t.cancel();
            canResend = true;
          } else {
            _start = _start - 1;
          }
        },
      ),
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: primaryColor,
        ),
        body: ListView(
          padding: EdgeInsets.only(top: 5, left: 5, right: 5),
          children: <Widget>[
            Card(
              elevation: 5.0,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.only(left: 20, right: 20, top: 40),
                    child: LocalText(
                      context,
                      'singup.verify.title',
                      fontSize: 21,
                      color: secondaryColor,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(
                      left: 20,
                      top: 20,
                    ),
                    child: LocalText(context, 'singup.code_sent',
                        fontSize: 15, color: labelColor),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 20),
                    child: Text(
                      widget.phoneNumber,
                      style: TextStyle(
                          color: primaryColor,
                          fontWeight: FontWeight.bold,
                          fontSize: 16),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: 20, left: 20, right: 20),
                    child: PinInputTextField(
                      pinLength: 6,
                      decoration:
                          BoxLooseDecoration(strokeColor: Colors.grey[400]),
                      textInputAction: TextInputAction.done,
                      autoFocus: true,
                      onChanged: _pinChange,
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 20, top: 20, right: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        RaisedButton(
                          onPressed: canResend ? _resend : null,
                          color: canResend ? Colors.white : Colors.grey,
                          child: LocalText(context, 'singup.resend',
                              fontSize: 16,
                              color:
                                  canResend ? primaryColor : Colors.grey[400]),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0),
                              side: BorderSide(
                                  color: canResend
                                      ? primaryColor
                                      : Colors.grey[400])),
                        ),
                        InkWell(
                          onTap: allNumberEntered ? _verify : null,
                          child: CircleAvatar(
                            backgroundColor: allNumberEntered
                                ? primaryColor
                                : Colors.grey[400],
                            child: Icon(
                              Icons.check,
                              color: Colors.white,
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(
                      left: 20,
                      right: 20,
                    ),
                    child: Row(
                      children: <Widget>[
                        LocalText(
                          context,
                          'login.smscode.retry',
                          fontSize: 15,
                          translationVariables: [_start.toString()],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 20),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  _pinChange(pin) {
    setState(() {
      this.pin = pin;
      this.allNumberEntered = this.pin.length == 6;
    });
  }

  _resend() async {}

  _verify() async {
    Provider.of<MainModel>(context).saveUser(pin,widget.phoneNumber);
    await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => UserEditPage()),
    );
    Navigator.pop(context);
  }

  _completeResend() {
    setState(() {
      _isLoading = false;
      _start = resend_count_sec;
      canResend = false;
      startTimer();
    });
  }

  _completeVerify() {
    setState(() {
      _isLoading = false;
    });
  }
}