import 'package:country_pickers/country.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:shopping_module/bloc/otp_bloc.dart';
import 'package:country_pickers/country_pickers.dart';

class OTPLoginSignupScreen extends StatefulWidget {
  @override
  _OTPLoginSignupScreenState createState() => _OTPLoginSignupScreenState();
}

class _OTPLoginSignupScreenState extends State<OTPLoginSignupScreen> {
  var errorText;
  TextEditingController _textEditingController;
  var text = "";
  @override
  void initState() {
    _textEditingController = TextEditingController();
    otpBloc.outputStream.listen(_onOTPData);
    super.initState();
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    print('changed dependencies $text');
    super.didChangeDependencies();
  }

  @override
  void didUpdateWidget(OTPLoginSignupScreen oldWidget) {
    print('did update');
    super.didUpdateWidget(oldWidget);
  }

  Widget _buildDropdownItem(Country country) => Container(
        child: Row(
          children: <Widget>[
            // CountryPickerUtils.getDefaultFlagImage(country),
            // SizedBox(
            //   width: 2.0,
            // ),
            Text("+${country.phoneCode}(${country.isoCode})"),
          ],
        ),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: ListView(
            children: <Widget>[
              SizedBox(
                height: 40,
              ),
              Image.asset(
                'assets/verify.png',
                height: ScreenUtil.getInstance().setHeight(900),
                fit: BoxFit.fitHeight,
              ),
              SizedBox(height: 8),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8.0),
                child: Text(
                  'Phone Number Verification',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),
                  textAlign: TextAlign.center,
                ),
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 30.0, vertical: 8),
                child: RichText(
                  text: TextSpan(
                      text: "We will send you a ",
                      children: [
                        TextSpan(
                            text: "Verification Code ",
                            style: TextStyle(
                                color: Colors.black,
                                fontWeight: FontWeight.bold,
                                fontSize: 15)),
                        TextSpan(
                            text: "on this mobile number",
                            style:
                                TextStyle(color: Colors.black54, fontSize: 15)),
                      ],
                      style: TextStyle(color: Colors.black54, fontSize: 15)),
                  textAlign: TextAlign.center,
                ),
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 8.0, horizontal: 30),
                child: StreamBuilder<OutputMap>(
                    stream: otpBloc.outputStream,
                    initialData: OutputMap(state: ScreenState.idle, value: ""),
                    builder: (context, snapshot) {
                      text = snapshot.data.state.toString();
                      if (snapshot.hasData) {
                        if (snapshot.data.state == ScreenState.failed) {
                          errorText = snapshot.data.value;
                        } else if (snapshot.data.state ==
                            ScreenState.codesent) {
                          // Navigator.pushNamed(context, '/pin_code_verification',
                          //     arguments: _textEditingController.text);
                        }
                        print(snapshot.data.state.toString());
                        return Column(
                          children: <Widget>[
                            Text(
                              'Enter your phone number',
                              style: TextStyle(
                                  color: Colors.black54, fontSize: 16),
                            ),
                            Row(
                              children: <Widget>[
                                Flexible(
                                  flex: 2,
                                  child: CountryPickerDropdown(
                                    initialValue: 'bd',
                                    itemBuilder: _buildDropdownItem,
                                    onValuePicked: (Country country) {
                                      print("${country.name}");
                                    },
                                  ),
                                ),
                                Expanded(
                                  flex: 3,
                                  child: TextField(
                                    controller: _textEditingController,
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                        fontSize: 18,
                                        color: Colors.black,
                                        fontWeight: FontWeight.bold),
                                    keyboardType: TextInputType.phone,
                                    decoration: InputDecoration(
                                        focusedBorder: UnderlineInputBorder(
                                            borderSide: BorderSide(
                                                width: 1.5,
                                                color: Colors.green)),
                                        // prefix: Text("+88 -"),
                                        // prefixStyle:
                                        //     TextStyle(fontSize: 18, color: Colors.black),
                                        hintText: "+8801722114455",
                                        hintStyle: TextStyle(
                                            color: Colors.black26,
                                            fontWeight: FontWeight.w400,
                                            fontStyle: FontStyle.italic),
                                        errorText: errorText),
                                  ),
                                ),
                              ],
                            ),
                            Container(
                              margin: const EdgeInsets.symmetric(
                                  vertical: 16.0, horizontal: 30),
                              child: ButtonTheme(
                                height: 50,
                                child: FlatButton(
                                  onPressed: () {
                                    Navigator.pushNamed(
                                        context, "/pin_code_verification",
                                        arguments: _textEditingController.text);
                                    // otpBloc.inputSink.add(InputMap(
                                    //     event: Event.verify,
                                    //     value: _textEditingController.text));
                                  },
                                  child: Center(
                                      child: (snapshot.data.state !=
                                              ScreenState.idle)
                                          ? SizedBox(
                                              height: 25,
                                              width: 25,
                                              child: CircularProgressIndicator(
                                                backgroundColor:
                                                    Colors.green.shade300,
                                              ),
                                            )
                                          : Text(
                                              "Login/Signup".toUpperCase(),
                                              style: TextStyle(
                                                  color: Colors.white,
                                                  fontSize: 18,
                                                  fontWeight: FontWeight.bold),
                                            )),
                                ),
                              ),
                              decoration: BoxDecoration(
                                  color: Colors.green.shade300,
                                  borderRadius: BorderRadius.circular(5),
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.green.shade200,
                                        offset: Offset(1, -2),
                                        blurRadius: 5),
                                    BoxShadow(
                                        color: Colors.green.shade200,
                                        offset: Offset(-1, 2),
                                        blurRadius: 5)
                                  ]),
                            )
                          ],
                        );
                      } else {
                        return Container();
                      }
                    }),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _onOTPData(OutputMap event) {
    if (event.state == ScreenState.timedOut) {
      Navigator.pushNamed(context, "/pin_code_verification",
          arguments: _textEditingController.text);
    } else if (event.state == ScreenState.done) {
      Navigator.pushNamed(
        context,
        "/home",
      );
    }
  }
}