import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/models/mobile_number.dart';
import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';

import '../../Constants.dart';

class PhoneNumberSelectorWidget extends StatefulWidget {
  final Function onNumberChange;
  final Function onCountryChange;
  final String mobileNo;
  PhoneNumberSelectorWidget({Key key, this.onNumberChange, this.onCountryChange, this.mobileNo}) : super(key: key);

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

class _PhoneNumberSelectorWidgetState extends State<PhoneNumberSelectorWidget> {
  var _selectedType = '+966';
  String countryCode = '966';
  List<Countries> counties = [];
  ProjectViewModel projectProvider;
  @override
  void initState() {
    for (var element in countriesData) counties.add(Countries.fromJson(element));

    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    projectProvider = Provider.of(context);
    String countryName = "";
    for (var element in counties) {
      if (element.code == countryCode) {
        countryName = projectProvider.isArabic == true ? element.nameAr : element.name;
      }
    }

    return Column(
      children: [
        inputWidget(TranslationBase.of(context).country, countryName, isEnable: false, hasSelection: true),
        SizedBox(height: 12),
        Directionality(textDirection: TextDirection.ltr, child: inputWidget(TranslationBase.of(context).phoneNumber, widget.mobileNo ?? "5xxxxxxxx", prefix: countryCode)),
      ],
    );
  }

  Widget inputWidget(String _labelText, String _hintText, {String prefix, bool isEnable = true, bool hasSelection = false}) {
    return Container(
        padding: EdgeInsets.only(left: 16, right: 16, bottom: 15, top: 15),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          color: Colors.white,
          border: Border.all(
            color: Color(0xffefefef),
            width: 1,
          ),
        ),
        child: PopupMenuButton(
          tooltip: "",
          child: Row(
            children: [
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      _labelText,
                      style: TextStyle(
                        fontSize: 11,
                        fontWeight: FontWeight.w600,
                        color: Color(0xff2B353E),
                        letterSpacing: -0.44,
                      ),
                    ),
                    TextField(
                      enabled: isEnable,
                      scrollPadding: EdgeInsets.zero,
                      keyboardType: TextInputType.number,
                      onChanged: (value) => widget.onNumberChange(value),
                      style: TextStyle(
                        fontSize: 14,
                        height: 21 / 14,
                        fontWeight: FontWeight.w400,
                        color: Color(0xff2B353E),
                        letterSpacing: -0.44,
                      ),
                      decoration: InputDecoration(
                        isDense: true,
                        hintText: _hintText,
                        hintStyle: TextStyle(
                          fontSize: 14,
                          height: 21 / 14,
                          fontWeight: FontWeight.w400,
                          color: Color(0xff575757),
                          letterSpacing: -0.56,
                        ),
                        prefixIconConstraints: BoxConstraints(minWidth: 50),
                        prefixIcon: prefix == null
                            ? null
                            : Text(
                                prefix,
                                style: TextStyle(
                                  fontSize: 14,
                                  height: 21 / 14,
                                  fontWeight: FontWeight.w500,
                                  color: Color(0xff2E303A),
                                  letterSpacing: -0.56,
                                ),
                              ),
                        contentPadding: EdgeInsets.zero,
                        border: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        enabledBorder: InputBorder.none,
                      ),
                    ),
                  ],
                ),
              ),
              if (hasSelection) Icon(Icons.keyboard_arrow_down_outlined),
            ],
          ),
          itemBuilder: (_) => <PopupMenuItem<String>>[
            if (hasSelection)
              for (var country in counties) PopupMenuItem<String>(child: Text(projectProvider.isArabic == true ? country.nameAr : country.name), value: country.code)
          ],
          onSelected: (countryCode) {
            setState(() {
              this.countryCode = countryCode;
              _selectedType = countryCode;
            });
            widget.onCountryChange(countryCode);
          },
        ));
  }
}

class MobileNo extends StatefulWidget {
  final bool disabled;

  final double margin;
  final double marginTop;
  final double marginRight;
  final double marginBottom;
  final double marginLeft;
  final TextEditingController controller;
  final Function onNumberChange;
  final Function onCountryChange;

  MobileNo({this.disabled = false, this.marginTop = 0, this.marginRight = 0, this.marginBottom = 0, this.controller, this.marginLeft = 0, this.onNumberChange, this.onCountryChange, this.margin = 0});

  @override
  _MobileNo createState() => _MobileNo();
}

class _MobileNo extends State<MobileNo> {
  var _selectedType = '+966';
  String countryCode = '+966';
  List<Countries> counties = [];
  ProjectViewModel projectProvider;
  @override
  void initState() {
    countriesData.forEach((element) {
      this.counties.add(Countries.fromJson(element));
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    projectProvider = Provider.of(context);
    return Visibility(
      child: Column(children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Container(
                margin: EdgeInsets.only(bottom: 10.0),
                height: 60.0,
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(
                    color: Colors.grey[400],
                    width: 1.0,
                  ),
                  borderRadius: BorderRadius.circular(10),
                ),
                width: MediaQuery.of(context).size.width * 0.89,
                child: Padding(
                  padding: EdgeInsets.all(10),
                  child: DropdownButtonHideUnderline(
                    child: DropdownButton(
                        isExpanded: true,
                        value: _selectedType,
                        iconSize: 40,
                        elevation: 16,
                        onChanged: (value) => {
                              widget.onCountryChange(value),
                              setState(() {
                                countryCode = value;
                                _selectedType = value;
                              })
                            },
                        items: counties.map<DropdownMenuItem<String>>((Countries value) {
                          return DropdownMenuItem<String>(
                            value: value.code,
                            child: Text(projectProvider.isArabic == true ? value.nameAr : value.name),
                          );
                        }).toList()),
                  ),
                ),
              ),
            ),
          ],
        ),
        Directionality(
          textDirection: TextDirection.ltr,
          child: Container(
            padding: EdgeInsets.all(5),
            decoration: BoxDecoration(color: Colors.white, border: Border.all(color: Colors.grey), borderRadius: BorderRadius.circular(10)),
            child: Row(children: <Widget>[
              Expanded(
                flex: 1,
                child: Icon(
                  Icons.phone,
                  color: secondaryColor,
                ),
              ),
              Expanded(
                flex: 1,
                child: Text(
                  countryCode,
                  overflow: TextOverflow.clip,
                ),
              ),
              Expanded(
                flex: 4,
                child: Container(
                  margin:
                      widget.margin != null ? EdgeInsets.all(widget.margin) : EdgeInsets.only(top: widget.marginTop, right: widget.marginRight, bottom: widget.marginBottom, left: widget.marginLeft),
                  child: TextField(
                    controller: widget.controller,
                    keyboardType: TextInputType.number,
                    maxLength: 10,
                    inputFormatters: <TextInputFormatter>[
                      FilteringTextInputFormatter.allow(RegExp("[0-9]")),
                    ],
                    // maxLengthEnforced: true,
                    // onChanged: (value) {
                    //   widget.controller.text = countryCode;
                    // },
                    onChanged: (value) => widget.onNumberChange(value),

                    decoration: InputDecoration(counterText: "", border: InputBorder.none, hintText: '5xxxxxxxx'),
                  ),
                ),
              )
            ]),
          ),
        )
      ]),
    );
  }
}

// class Countries {
//   final String name;
//   final String name_ar;
//   final String code;

//   Countries({this.name, this.name_ar, this.code});
// }