import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:tangheem/api/user_api_client.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/classes/utils.dart';
import 'package:tangheem/extensions/int_extensions.dart';
import 'package:tangheem/extensions/string_extensions.dart';
import 'package:tangheem/extensions/widget_extensions.dart';
import 'package:tangheem/models/country_model.dart';
import 'package:tangheem/models/general_response_model.dart';
import 'package:tangheem/ui/bottom_sheets/country_selection_bottom_sheet.dart';
import 'package:tangheem/ui/dialogs/general_dialog.dart';
import 'package:tangheem/ui/screens/contact_us_screen.dart';
import 'package:tangheem/widgets/common_textfield_widget.dart';

class RegistrationScreen extends StatefulWidget {
  static const String routeName = "/registration";

  RegistrationScreen({Key key}) : super(key: key);

  @override
  _RegistrationScreenState createState() {
    return _RegistrationScreenState();
  }
}

class _RegistrationScreenState extends State<RegistrationScreen> {
  TextEditingController _firstNameController = TextEditingController();
  TextEditingController _lastNameController = TextEditingController();
  TextEditingController _emailController = TextEditingController();
  TextEditingController _mobileNumberController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();
  TextEditingController _confirmPasswordController = TextEditingController();

  bool _isAccept = false;

  CountryModelData _selectedCountry;
  CountryModel _countryModel;

  @override
  void initState() {
    super.initState();
    fetchCountryList();
  }

  void fetchCountryList() async {
    Utils.showLoading(context);
    try {
      _countryModel = await UserApiClient().getCountry();
      if ((_countryModel?.data?.length ?? 0) > 0) {
        _selectedCountry = _countryModel.data.first;
      }
      setState(() {});
    } catch (ex) {
      if (mounted) Utils.handleException(ex, null);
    } finally {
      Utils.hideLoading(context);
    }
  }

  void registerUser(String _firstName, String _lastName, String _email, String _password, String _countryCode, String _phone) async {
    Utils.showLoading(context);
    try {
      GeneralResponseModel model = await UserApiClient().registerUser(_firstName, _lastName, _email, _password, _countryCode, _phone);
      if (model.message == "UserRegistration Already Exists") {
        Utils.showToast("البريد الإلكتروني مستخدم سابقا");
        Utils.hideLoading(context);
        return;
      }
      Utils.hideLoading(context);
      await showDialog(
        context: context,
        barrierColor: ColorConsts.secondaryWhite.withOpacity(0.8),
        builder: (BuildContext context) => GeneralDialog(message: "تم إنشاء الحساب بنجاح , الرجاء توثيق الحساب من خلال الرابط المرسل إلى بريدك الإلكتروني"),
      );
      Navigator.pop(context);
    } catch (ex) {
      if (mounted) Utils.handleException(ex, null);
      Utils.hideLoading(context);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

    Widget _header = Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Padding(
          padding: EdgeInsets.only(top: 35, bottom: 24),
          child: SvgPicture.asset("assets/icons/regsiter_user.svg", width: 72, height: 72),
        ),
        "انشاء حساب جديد".toText(18, color: ColorConsts.darkText),
      ],
    );

    Widget _dataInput = Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        CommonTextFieldWidget(hint: "البريد الإلكتروني", controller: _emailController, isEmail: true),
        SizedBox(height: 8),
        CommonTextFieldWidget(hint: "الاسم الأول", controller: _firstNameController),
        SizedBox(height: 8),
        CommonTextFieldWidget(hint: "الاسم الأخير", controller: _lastNameController),
        SizedBox(height: 8),
        CommonTextFieldWidget(
          hint: _selectedCountry?.countryNameAr ?? "الدولة",
          controller: null,
          suffixWidget: Icon(Icons.keyboard_arrow_down, size: 18, color: ColorConsts.secondaryOrange),
          onTap: () {
            _selectCountry(context);
          },
        ),
        SizedBox(height: 8),
        CommonTextFieldWidget(
          hint: " رقم الجوال (اختياري)${" (" + (_selectedCountry?.countryCode ?? "+9xx") + " xxxxxxxxx)"}",
          controller: _mobileNumberController,
          suffixWidget: Text(_selectedCountry?.countryCode ?? "", textDirection: TextDirection.ltr),
        ),
        SizedBox(height: 8),
        CommonTextFieldWidget(hint: "تعيين كلمة المرور", controller: _passwordController),
        SizedBox(height: 8),
        CommonTextFieldWidget(hint: "تأكيد كلمة المرور", controller: _confirmPasswordController),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(_isAccept ? Icons.check_box_rounded : Icons.check_box_outline_blank_rounded, color: ColorConsts.borderDark2Text, size: 17),
            SizedBox(width: 8),
            "جميع البيانات صحيحة ضمن اتفاقية الاستخدام".toText(14, color: ColorConsts.darkText).expanded,
          ],
        ).onPress(() {
          setState(() {
            _isAccept = !_isAccept;
          });
        }).paddingOnly(top: 24, bottom: 24, left: 16, right: 16),
      ],
    );

    List<Widget> _dataList = [
      _header,
      "قم بتعبئة بيانات طلب انشاء الحساب و ستصلك رسالة تأكيد, ومن ثم يمكنك الدخول لحسابك الجديد"
          .toText(13, color: ColorConsts.grey9FColor, textAlign: TextAlign.center)
          .paddingOnly(left: 24, right: 24, top: 18, bottom: 18),
      _dataInput.paddingOnly(left: 12, right: 12),
    ];

    Widget _registrationButton = SizedBox(
      width: double.infinity,
      height: 50,
      child: TextButton(
        onPressed: () {
          if (_emailController.text.length < 1) {
            Utils.showToast("يرجى إدخال البريد الإلكتروني");
            return;
          }
          if (_firstNameController.text.length < 1) {
            Utils.showToast("يرجى إدخال الاسم الأول");
            return;
          }
          if (_lastNameController.text.length < 1) {
            Utils.showToast("يرجى إدخال الاسم الأخير");
            return;
          }
          if (_selectedCountry?.countryCode == null) {
            Utils.showToast("يرجى اختيار الدولة");
            return;
          }
          // if (_mobileNumberController.text.length < 1) {
          //   Utils.showToast("يرجى إدخال رقم الجوال");
          //   return;
          // } else

          if (_mobileNumberController.text.isNotEmpty && (_mobileNumberController.text.length < 8 || _mobileNumberController.text.length > 12)) {
            Utils.showToast("رقم الهاتف غير صحيح");
            return;
          }
          if (_passwordController.text.length < 1) {
            Utils.showToast("يرجى إدخال كلمة المرور");
            return;
          }
          if (_confirmPasswordController.text.length < 1) {
            Utils.showToast("يرجى تأكيد كلمة المرور");
            return;
          }

          if (!_emailController.text.isValidEmail()) {
            Utils.showToast("صيغة البريد الإلكتروني خاطئة");
            return;
          }

          if (_passwordController.text != _confirmPasswordController.text) {
            Utils.showToast("كلمة المرور غير متطابقة");
            return;
          }

          if (!_isAccept) {
            Utils.showToast("الرجاء الموافقة على سياسة الخصوصية");
            return;
          }
          registerUser(_firstNameController.text, _lastNameController.text, _emailController.text, _passwordController.text, _selectedCountry?.countryCode, _mobileNumberController.text);
        },
        style: TextButton.styleFrom(
          backgroundColor: ColorConsts.darkText,
          foregroundColor: Colors.white,
          textStyle: TextStyle(fontSize: 18),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25.0),
          ),
        ),
        child: Text("انشئ حسابك"),
      ),
    );

    Widget _contactUsButton = Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SvgPicture.asset("assets/icons/new/contact_us.svg", width: 26, height: 24, color: ColorConsts.greyC4Color),
        8.height,
        "اتصل بنا".toText(14, color: ColorConsts.greyC4Color),
      ],
    ).onPress(() {
      Navigator.pushNamed(context, ContactUsScreen.routeName);
    });

    return isPortrait
        ? Scaffold(
            backgroundColor: ColorConsts.greyF8Color,
            body: SingleChildScrollView(
              padding: EdgeInsets.only(top: 100, bottom: 24),
              physics: BouncingScrollPhysics(),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Image.asset("assets/icons/new/Tangeem-logo.png", width: 116, height: 62),
                  30.height,
                  Container(
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0), color: Colors.white),
                    margin: EdgeInsets.only(left: 24, right: 24, top: 24, bottom: 20),
                    child: Column(crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: _dataList),
                  ),
                  _registrationButton.paddingOnly(left: 35, right: 35, bottom: 35),
                  _contactUsButton,
                ],
              ),
            ),
          )
        : Row(
            children: [
              Expanded(child: Image.asset("assets/icons/new/Tangeem-logo.png", width: 116, height: 62).paddingOnly(right: 70), flex: 3),
              Expanded(
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0), color: Colors.white),
                    margin: EdgeInsets.all(24),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Expanded(child: _header, flex: 2),
                        Expanded(
                            child: SingleChildScrollView(
                              padding: EdgeInsets.all(24),
                              physics: const BouncingScrollPhysics(),
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  "قم بتعبئة بيانات طلب انشاء الحساب و ستصلك رسالة تأكيد, ومن ثم يمكنك الدخول لحسابك الجديد".toText(14, color: ColorConsts.grey9FColor, textAlign: TextAlign.center),
                                  24.height,
                                  _dataInput,
                                  _registrationButton,
                                  24.height,
                                  _contactUsButton,
                                ],
                              ),
                            ),
                            flex: 4),
                      ],
                    ),
                  ),
                  flex: 7),
            ],
          );
  }

  void _selectCountry(context) {
    showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
      ),
      backgroundColor: Colors.transparent,
      builder: (BuildContext bc) => CountrySelectionBottomSheet(
          countryList: _countryModel?.data ?? [],
          onSelectCountry: (country) {
            WidgetsBinding.instance.addPostFrameCallback((_) {
              setState(() {
                _selectedCountry = country;
              });
            });
          }),
    );
  }
}
