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

class AddLabelBox extends StatelessWidget {
  const AddLabelBox({
    Key? key,
    required double deviceBlockSize,
    required this.values,
    required this.vals,
    required this.initialLabelValue,
    required this.index,
    required this.text,
    this.iconColor,
    required this.hasRemoveButton,
  })  : _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;
  final bool hasRemoveButton;

  @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 'Label 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<CyclesProvider>(context,
                                          listen: false)
                                      .changeLabelVal(val!, index);
                                },
                              ),
                            ),
                            Spacer(),
                            InkWell(
                              onTap: () {
                                Provider.of<CyclesProvider>(context,
                                        listen: false)
                                    .scanLabel(true, 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<CyclesProvider>(context, listen: false)
                    .addLabelVal();
              },
              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<CyclesProvider>(context, listen: false)
                      .removeLabelVal();
                },
                child: Container(
                  padding: EdgeInsets.all(3),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: iconColor,
                  ),
                  child: Icon(
                    Icons.remove,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}