import 'package:cssd/providers/labels.dart';
import 'package:cssd/utils/scan.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';

class AddPackageBox extends StatelessWidget {
  const AddPackageBox({
    Key? key,
    required double deviceBlockSize,
    required this.values,
    required this.vals,
    required this.initialLabelValue,
    required this.index,
    required this.text,
    this.iconColor,
  })  : _deviceBlockSize = deviceBlockSize,
        super(key: key);

  final double _deviceBlockSize;
  final TextEditingController values;
  final List<String> vals;
  final String initialLabelValue;
  final int index;
  final String text;
  final Color? iconColor;

  @override
  Widget build(BuildContext context) {
    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: DropdownButtonFormField(
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.only(
                                    left: _deviceBlockSize,
                                  ),
                                  border: InputBorder.none,
                                ),
                                iconSize: 7 * _deviceBlockSize,
                                icon: Icon(
                                  FontAwesomeIcons.angleDown,
                                  color: Colors.black,
                                ),
                                isExpanded: true,
                                hint: Container(
                                  // width: 100,
                                  height: 70,
                                  padding:
                                      const EdgeInsets.symmetric(horizontal: 0),
                                  child: TextFormField(
                                    controller: values,
                                    validator: (val) {
                                      if (val!.isEmpty) {
                                        return 'Package required!';
                                      }
                                      return null;
                                    },
                                    decoration: InputDecoration(
                                      contentPadding: EdgeInsets.only(
                                        bottom: 12,
                                      ),
                                      isDense: true,
                                    ),
                                    style: TextStyle(
                                      fontWeight: FontWeight.w700,
                                      color: Colors.black,
                                      fontSize: 5 * _deviceBlockSize,
                                    ),
                                  ),
                                ),
                                isDense: true,
                                items: vals.map((val) {
                                  return new DropdownMenuItem<String>(
                                    value: val,
                                    child: Container(
                                      child: Text(
                                        val,
                                        style: TextStyle(
                                          fontSize: 4 * _deviceBlockSize,
                                        ),
                                      ),
                                    ),
                                  );
                                }).toList(),
                                onChanged: (val) {
                                  Provider.of<LabelsProvider>(context,
                                          listen: false)
                                      .changePackageVal(val!, index);
                                },
                              ),
                            ),
                            Spacer(),
                            InkWell(
                              onTap: () {
                                scan().then(
                                  (String result) {
                                    if (result == 'cancel') {
                                      print('cancel');
                                    } else if (result == 'error') {
                                      print('error');
                                    } else if (result == 'access') {
                                      print('access');
                                    } else {
                                      print(result);
                                      Provider.of<LabelsProvider>(context,
                                              listen: false)
                                          .changePackageVal(result, 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<LabelsProvider>(context, listen: false).addPackageVal();
          //     },
          //     child: Container(
          //       padding: EdgeInsets.all(3),
          //       decoration: BoxDecoration(
          //         shape: BoxShape.circle,
          //         color: iconColor,
          //       ),
          //       child: Icon(
          //         Icons.add,
          //         color: Colors.white,
          //       ),
          //     ),
          //   ),
          // ),
        ],
      ),
    );
  }
}