import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
import 'package:test_sa/models/lookup.dart';
import 'package:test_sa/views/app_style/colors.dart';
import 'package:test_sa/views/app_style/sizing.dart';

class MultiStatusMenu extends StatefulWidget {
  final List<Lookup> statuses;
  final List<Lookup> initialSelectedStatus;
  final Function(List<Lookup>) onSelect;

  const MultiStatusMenu({Key key, this.statuses, this.onSelect, this.initialSelectedStatus}) : super(key: key);

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

class _MultiStatusMenuState extends State<MultiStatusMenu> {
  List<Lookup> _selectedStatus = [];
  TextEditingController _controller;

  @override
  void initState() {
    _controller = TextEditingController();
    _selectedStatus.addAll(widget.initialSelectedStatus);
    super.initState();
  }

  @override
  void dispose() {
    _controller.clear();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Wrap(
          crossAxisAlignment: WrapCrossAlignment.start,
          alignment: WrapAlignment.start,
          runAlignment: WrapAlignment.start,
          children: List.generate(_selectedStatus.length, (index) {
            final status = _selectedStatus[index];
            return Container(
                height: 36 * AppStyle.getScaleFactor(context),
                margin: EdgeInsets.all(4 * AppStyle.getScaleFactor(context)),
                //padding: EdgeInsets.all(4 * AppStyle.getScaleFactor(context)),
                decoration: BoxDecoration(color: Theme.of(context).colorScheme.primary, borderRadius: BorderRadius.circular(8)),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const SizedBox(
                      width: 12,
                    ),
                    Text(
                      status.name,
                      style: Theme.of(context).textTheme.bodyText1.copyWith(
                            color: Theme.of(context).colorScheme.onPrimary,
                          ),
                    ),
                    IconButton(
                        color: Theme.of(context).colorScheme.onPrimary,
                        onPressed: () {
                          _selectedStatus.remove(status);
                          widget.onSelect(_selectedStatus);
                          setState(() {});
                        },
                        icon: const Icon(Icons.delete))
                  ],
                ));
          }),
        ),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: AColors.black),
              borderRadius: BorderRadius.circular(AppStyle.borderRadius * AppStyle.getScaleFactor(context)),
              boxShadow: const [AppStyle.boxShadow]),
          child: TypeAheadField<Lookup>(
            textFieldConfiguration: TextFieldConfiguration(
              style: Theme.of(context).textTheme.subtitle1,
              controller: _controller,
              textAlign: TextAlign.center,
              decoration: const InputDecoration(
                border: InputBorder.none,
                disabledBorder: InputBorder.none,
                focusedBorder: InputBorder.none,
                enabledBorder: InputBorder.none,
              ),
              textInputAction: TextInputAction.search,
            ),
            suggestionsCallback: (vale) {
              return widget.statuses.where((Lookup option) {
                return option.name.toLowerCase().contains(_controller.text);
              });
            },
            itemBuilder: (context, part) {
              return ListTile(
                title: Text(part.name),
              );
            },
            onSuggestionSelected: (status) {
              _controller.clear();
              if (!_selectedStatus.contains(status)) {
                _selectedStatus.add(status);
                widget.onSelect(_selectedStatus);
                setState(() {});
              }
            },
          ),
        ),
      ],
    );
  }
}