import 'package:cssd/providers/packages.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';

class AddItemBox extends StatelessWidget {
  const AddItemBox({
    Key? key,
    required double deviceBlockSize,
    required this.values,
    required this.vals,
    required this.initialItemValue,
    required this.index,
    required this.text,
    // required this.scanUdi,
    this.iconColor,
    // required this.filteredItems,
    required this.hasRemoveButton,
  })  : _deviceBlockSize = deviceBlockSize,
        super(key: key);

  final double _deviceBlockSize;
  final TextEditingController values;

  // final List<Map<String, dynamic>> vals;
  final List<String> vals;

  final String initialItemValue;
  final int index;
  final String text;
  final Color? iconColor;
  final bool hasRemoveButton;

  // final List<ItemResultObject> filteredItems;
  // final String scanUdi;

  @override
  Widget build(BuildContext context) {
    bool isEnabled = true;
    return Container(
      height: 150,
      child: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
              right: 10,
              bottom: 25,
              left: 10,
              top: 10,
            ),
            decoration: BoxDecoration(
              border: Border(
                left: BorderSide(color: Colors.black, width: 2),
                right: BorderSide(color: Colors.grey),
                bottom: BorderSide(color: Colors.grey),
                top: BorderSide(color: Colors.grey),
              ),
            ),
            height: 120,
            child: 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 * _deviceBlockSize,
                  ),
                  SizedBox(
                    width: 4 * _deviceBlockSize,
                  ),
                  Expanded(
                    // width: MediaQuery.of(context).size.width - 70,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            SizedBox(
                              width: _deviceBlockSize,
                            ),
                            Text(
                              text,
                              style: TextStyle(
                                fontSize: 3.5 * _deviceBlockSize,
                                color: Colors.grey,
                                fontWeight: FontWeight.w100,
                              ),
                            ),
                          ],
                        ),
                        Row(
                          children: <Widget>[
                            Container(
                              width: MediaQuery.of(context).size.width -
                                  (40 * _deviceBlockSize),
                              // height: 30,
                              child: Consumer<PackageProvider>(
                                  builder: (context, packageProvider, _) {
                                return DropdownButtonFormField(
                                  decoration: InputDecoration(
                                    contentPadding: EdgeInsets.only(
                                      left: _deviceBlockSize,
                                    ),
                                    border: InputBorder.none,
                                    // suffixIcon: Padding(
                                    //     padding: EdgeInsets.all(8),
                                    //     child: InkWell(
                                    //       child: Container(
                                    //         decoration: BoxDecoration(
                                    //           shape: BoxShape.circle,
                                    //           color: iconColor,
                                    //         ),
                                    //         child: Icon(
                                    //           Icons.clear,
                                    //           color: Colors.white,
                                    //         ),
                                    //       ),
                                    //       onTap: () async {
                                    //         packageProvider.setClear(index);
                                    //         // _key.currentState?.reset();
                                    //       },
                                    //     )),
                                  ),
                                  iconSize: 7 * _deviceBlockSize,
                                  icon: Icon(
                                    FontAwesomeIcons.angleDown,
                                    color: Colors.black,
                                  ),
                                  isExpanded: true,
                                  selectedItemBuilder: (context) =>
                                      vals.map((val) {
                                    return packageProvider.isClear
                                        ? Container(
                                            height: 70,
                                            padding: const EdgeInsets.symmetric(
                                                horizontal: 0),
                                            child: Consumer<PackageProvider>(
                                              builder: (context,
                                                  packageProvider, _) {
                                                return TextFormField(
                                                  controller: packageProvider
                                                      .itemValues[index],
                                                  validator: (val) {
                                                    if (val!.isEmpty) {
                                                      return 'Item required!';
                                                    }
                                                    return null;
                                                  },
                                                  decoration: InputDecoration(
                                                    contentPadding:
                                                        EdgeInsets.only(
                                                      bottom: 12,
                                                    ),
                                                    isDense: true,
                                                  ),
                                                  style: TextStyle(
                                                    fontWeight: FontWeight.w700,
                                                    color: Colors.black,
                                                    fontSize:
                                                        4 * _deviceBlockSize,
                                                  ),
                                                );
                                              },
                                            ),
                                          )
                                        : new DropdownMenuItem<String>(
                                            enabled: isEnabled,
                                            value: val,
                                            child: Container(
                                              child: Text(
                                                packageProvider.isClear
                                                    ? ""
                                                    : val ?? "",
                                                style: TextStyle(
                                                  fontSize:
                                                      4 * _deviceBlockSize,
                                                ),
                                              ),
                                            ),
                                          );
                                  }).toList(),
                                  hint: Container(
                                    // width: 100,
                                    height: 70,
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 0),
                                    child: Consumer<PackageProvider>(
                                      builder: (context, packageProvider, _) {
                                        return TextFormField(
                                          controller:
                                              packageProvider.itemValues[index],
                                          validator: (val) {
                                            if (val!.isEmpty) {
                                              return 'Item required!';
                                            }
                                            return null;
                                          },
                                          decoration: InputDecoration(
                                            contentPadding: EdgeInsets.only(
                                              bottom: 12,
                                            ),
                                            isDense: true,
                                          ),
                                          style: TextStyle(
                                            fontWeight: FontWeight.w700,
                                            color: Colors.black,
                                            fontSize: 4 * _deviceBlockSize,
                                          ),
                                        );
                                      },
                                    ),
                                  ),
                                  isDense: true,
                                  items: vals.map((val) {
                                    return new DropdownMenuItem<String>(
                                      enabled: isEnabled,
                                      value: val,
                                      child: Container(
                                        child: Text(
                                          val ?? "",
                                          style: TextStyle(
                                            fontSize: 4 * _deviceBlockSize,
                                          ),
                                        ),
                                      ),
                                    );
                                  }).toList(),
                                  onChanged: (val) async {
                                    await packageProvider.reSetClear();
                                    await Provider.of<PackageProvider>(context,
                                            listen: false)
                                        .changeItemVal(val.toString()!, index);
                                  },
                                );
                              }),
                            ),
                            Spacer(),
                            InkWell(
                              onTap: () async {
                                Provider.of<PackageProvider>(context,
                                        listen: false)
                                    .scanItem(isEnabled, context, index);
                              },
                              child: Container(
                                padding: EdgeInsets.all(8),
                                decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.black,
                                ),
                                child: Icon(
                                  Icons.qr_code_scanner,
                                  size: 5 * _deviceBlockSize,
                                  color: Colors.white,
                                ),
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Positioned(
            bottom: 15,
            right: 0,
            child: InkWell(
              onTap: () {
                Provider.of<PackageProvider>(context, listen: false)
                    .addItemVal();
              },
              child: Container(
                padding: EdgeInsets.all(3),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: iconColor,
                ),
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          if (hasRemoveButton)
            Positioned(
              bottom: 15,
              right: 50,
              child: InkWell(
                onTap: () {
                  Provider.of<PackageProvider>(context, listen: false)
                      .removeItemVal();
                },
                child: Container(
                  padding: EdgeInsets.all(3),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: iconColor,
                  ),
                  child: Icon(
                    Icons.remove,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}