import 'package:cathaypay_mobile/Numpad.dart';
import 'package:cathaypay_mobile/Register/register_ekyc.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';



class PinCodePage extends StatefulWidget {
  const PinCodePage({Key? key, required this.login}) : super(key: key);
  final bool login;
  @override
  State<PinCodePage> createState() => _PinCodePageState();
}

class _PinCodePageState extends State<PinCodePage> {
  TextEditingController _pin = TextEditingController();

  setValue(String val) {
    setState(() {
      _pin.text += val;
    });
    if(_pin.text.length == 6){
      _saveText(_pin.text);
      if(widget.login == true){
        Navigator.pushNamed(context, '/HomePage');
      }
      if(widget.login == false){
        Navigator.pushNamed(context, '/RegisterPicturePage');
        // Navigator.push(
        //   context,
        //   MaterialPageRoute(
        //     builder: (context) => RegisterEkycPage(),
        //   ),
        // );

      }

    }
  }

  backspace(String text) {
    if (_pin.text.length > 0) {
      setState(() {
        _pin.text = _pin.text.substring(0, _pin.text.length - 1);
      });
    }
  }

  void _saveText(String text) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setString('PinCode', text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      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(
              "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),
                      ),
                    ],
                  )
                ],
              ),
            ),

          ],
        ),
      ),
    );
  }
}