import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

// OWNER : Ibrahim albitar
// DATE : 12-04-2020
// DESCRIPTION : Customization for Texts in app

class MobileNo extends StatefulWidget {
  final bool disabled;
  // final String data;
  final List<Countries> countries = [
    new Countries(name: 'Saudi Arabia', code: '966'),
    new Countries(name: 'Dubai', code: '971'),
  ];
  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';
  @override
  Widget build(BuildContext context) {
    return Visibility(
        child: Column(children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
              // add Expanded to have your dropdown button fill remaining space
              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: widget.countries
                              .map<DropdownMenuItem<String>>((Countries value) {
                            return DropdownMenuItem<String>(
                              value: value.code,
                              child: Text(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: Color(0xFF40ACC9),
              )),
          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.phone,
                // onChanged: (value) {
                //   widget.controller.text = countryCode;
                // },
                onChanged: (value) => widget.onNumberChange(value),
                decoration: InputDecoration(
                    border: InputBorder.none, hintText: '5xxxxxxxx'),
              ),
            ),
          )
        ]),
      )
    ]));
  }
}

class Countries {
  final String name;
  final String code;
  Countries({this.name, this.code});
}