import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart';
import 'package:diplomaticquarterapp/models/mobile_number.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 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())))),
          ),
        ],
      ),
      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});
// }
