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

class LabelAddSelectorBox extends StatefulWidget {
  const LabelAddSelectorBox({
    Key? key,
    required double deviceBlockSize,
    required this.packageCTRL,
    required this.packageVals,
    required this.packageValue,
  })  : _deviceBlockSize = deviceBlockSize,
        super(key: key);

  final double _deviceBlockSize;
  final TextEditingController packageCTRL;
  final List<Map<String, String>> packageVals;
  final List<String> packageValue;

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

class _LabelAddSelectorBoxState extends State<LabelAddSelectorBox> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 5),
      // height: 65,
      child: Row(
        // width: double.infinity,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Icon(
            FontAwesomeIcons.alignLeft,
            color: Colors.grey,
            size: 7 * widget._deviceBlockSize,
          ),
          SizedBox(
            width: 4 * widget._deviceBlockSize,
          ),
          Expanded(
            // width: MediaQuery.of(context).size.width - 70,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    SizedBox(
                      width: widget._deviceBlockSize,
                    ),
                    Text(
                      'Package',
                      style: TextStyle(
                          fontSize: 3.5 * widget._deviceBlockSize,
                          color: Colors.grey,
                          fontWeight: FontWeight.w700),
                    ),
                  ],
                ),
                Container(
                  // height: 30,
                  child: DropdownButtonFormField(
                    decoration: InputDecoration(
                      contentPadding:
                          EdgeInsets.only(left: widget._deviceBlockSize),
                      // border: InputBorder.none,
                    ),
                    iconSize: 7 * widget._deviceBlockSize,
                    icon: Icon(
                      FontAwesomeIcons.angleDown,
                      color: Colors.black,
                    ),
                    isExpanded: true,
                    hint: Container(
                      // width: 100,
                      height: 70,
                      padding: const EdgeInsets.symmetric(horizontal: 0),
                      child: Text(
                        widget.packageCTRL.text,
                        textDirection: TextDirection.rtl,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontWeight: FontWeight.w700,
                          color: Colors.black,
                          fontSize: 5 * widget._deviceBlockSize,
                        ),
                      ),
                    ),
                    // Container(
                    //   // width: 100,
                    //   height: 70,
                    //   padding: const EdgeInsets.symmetric(horizontal: 0),
                    //   child: TextFormField(
                    //     controller: widget.packageCTRL,
                    //     decoration: InputDecoration(
                    //       contentPadding: EdgeInsets.only(bottom: 15),
                    //       isDense: true,
                    //     ),
                    //     style: TextStyle(
                    //       fontWeight: FontWeight.w700,
                    //       color: Colors.black,
                    //       fontSize: 5 * widget._deviceBlockSize,
                    //     ),
                    //   ),
                    // ),
                    isDense: true,
                    items: widget.packageVals.map((val) {
                      return new DropdownMenuItem<String>(
                        value: val['name'],
                        child: Container(
                          child: Text(
                            val['name'] ?? '',
                            textDirection: TextDirection.rtl,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                              fontWeight: FontWeight.w700,
                              color: Colors.black,
                              fontSize: 5 * widget._deviceBlockSize,
                            ),
                          ),
                        ),
                      );
                    }).toList(),
                    onChanged: (val) {
                      setState(
                        () {
                          widget.packageValue[1] = val!;
                          widget.packageCTRL.text = val;
                          widget.packageVals.forEach(
                            (package) {
                              if (package['name'] == val) {
                                widget.packageValue[0] = package['id'] ?? '';
                              }
                            },
                          );
                        },
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}