import 'package:cathaypay_mobile/Numpad.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:shared_preferences/shared_preferences.dart';

TextEditingController _pin = TextEditingController();

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

  @override
  State<PinCodeValidatePage> createState() => _PinCodeValidatePageState();
}

class _PinCodeValidatePageState extends State<PinCodeValidatePage> {
  var isFail = false;
  String _savedText = "";
  setValue(String val) {
    if(_pin.text.length <= 6){
      setState(() {
        _pin.text += val;
      });
    }

    if(_pin.text.length == 6){
      if(_pin.text == _savedText){
        _pin.clear();
        Navigator.of(context).pop(true);
      }else{
        setState(() {
          _pin.clear();
          isFail = true;
        });
      }
    }
  }

  backspace(String text) {
    if (_pin.text.length > 0) {
      setState(() {
        _pin.text = _pin.text.substring(0, _pin.text.length - 1);
      });
    }
  }
  @override
  void initState() {
    super.initState();
    _loadSavedText();
  }
  void _loadSavedText() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _savedText = (prefs.getString('PinCode') ?? '') ;
      print("_savedText : ");
      print("_savedText : "+_savedText );
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(
      backgroundColor: Colors.white,

      leading: CupertinoButton(
        onPressed: () {
          Navigator.pop(context);
        },
        child: const Icon(
          Icons.chevron_left,
          color: Colors.black54,
        ),
      ),
      elevation: 0,

    ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: 86,
              width: 153,
              child: Image(
                image: AssetImage('images/neopay_logo.png'),
                fit: BoxFit.fitHeight,
              ),
            ),SizedBox(
              height: 30,
            ),
            Text(
              isFail?"รหัสไม่ถูกต้อง กรุณาลองใหม่":"Enter 6-digit PIN".tr(),
              textAlign: TextAlign.center,
              style: GoogleFonts.kanit(
                color: Color(0xff050505),
                fontSize: 16,
              ),
            ),SizedBox(
              height: 30,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 80),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 16,
                    height: 16,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: _pin.text.length > 0
                          ? Color(0xff9d001b)
                          : Color(0xffb3b3b3),
                    ),
                  ),
                  Container(
                    width: 16,
                    height: 16,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: _pin.text.length > 1
                          ? Color(0xff9d001b)
                          : Color(0xffb3b3b3),
                    ),
                  ),
                  Container(
                    width: 16,
                    height: 16,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: _pin.text.length > 2
                          ? Color(0xff9d001b)
                          : Color(0xffb3b3b3),
                    ),
                  ),
                  Container(
                    width: 16,
                    height: 16,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: _pin.text.length > 3
                          ? Color(0xff9d001b)
                          : Color(0xffb3b3b3),
                    ),
                  ),
                  Container(
                    width: 16,
                    height: 16,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: _pin.text.length > 4
                          ? Color(0xff9d001b)
                          : Color(0xffb3b3b3),
                    ),
                  ),
                  Container(
                    width: 16,
                    height: 16,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: _pin.text.length > 5
                          ? Color(0xff9d001b)
                          : Color(0xffb3b3b3),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 30,
            ),
            Container(
              //  padding: EdgeInsets.symmetric(horizontal: 50.0),
              child: Column(
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      NumpadButton(
                        text: '1',
                        onPressed: () => setValue('1'),
                      ),
                      NumpadButton(
                        text: '2',
                        onPressed: () => setValue('2'),
                      ),
                      NumpadButton(
                        text: '3',
                        onPressed: () => setValue('2'),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      NumpadButton(
                        text: '4',
                        onPressed: () => setValue('4'),
                      ),
                      NumpadButton(
                        text: '5',
                        onPressed: () => setValue('5'),
                      ),
                      NumpadButton(
                        text: '6',
                        onPressed: () => setValue('6'),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      NumpadButton(
                        text: '7',
                        onPressed: () => setValue('7'),
                      ),
                      NumpadButton(
                        text: '8',
                        onPressed: () => setValue('8'),
                      ),
                      NumpadButton(
                        text: '9',
                        onPressed: () => setValue('9'),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.symmetric(vertical: 10.0),
                        width: 90,
                        height: 90,
                        child: OutlinedButton(
                          style: OutlinedButton.styleFrom(
                            side: BorderSide.none,
                            backgroundColor: Colors.transparent,
                          ),
                          onPressed: () {},
                          child: Padding(
                            padding: EdgeInsets.all(20.0),
                            child: Text(
                              "0",
                              style: GoogleFonts.kanit(
                                color: Colors.transparent,
                                fontSize: 30,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ),
                      ),
                      NumpadButton(
                        text: '0',
                        onPressed: () => setValue('0'),
                      ),
                      NumpadButton(
                        haveBorder: false,
                        icon: Icons.backspace,
                        onPressed: () => backspace(_pin.text),
                      ),
                    ],
                  )
                ],
              ),
            ),

          ],
        ),
      ),
    );
  }
}