import 'package:fis_i18n/i18n.dart';
import 'package:fis_ui/index.dart';
import 'package:fis_ui/interface/interactive_container.dart';
import 'package:flutter/material.dart';
import 'package:flyinsono/architecture/define.dart';
import 'package:flyinsono/pages/user/user_id_auth_apply/controller.dart';
import 'package:flyinsono/pages/user/user_id_auth_apply/widgets/selected_labels.dart';

///角色标签独立展示
class RoleLableRow extends FisView<UserIdAuthApplyController>
    implements FInteractiveContainer {
  final _itemHeight = 38.0;
  @override
  final String pageName = 'RoleLableRow';
  @override
  FWidget build(BuildContext context) {
    var decoration = FBorderInput.buildDecoration(
      height: _itemHeight,
      contentSize: 16,
      hintSize: 16,
      hintText: i18nBook.user.SelectOrInputSkilledField.t,
      borderColor: Colors.grey[350],
    );
    return FColumn(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        SelectedLabels(),
        FRow(
          children: [
            FExpanded(
              child: FContainer(
                margin: EdgeInsets.only(top: 3),
                child: FSuggesionInput<String>(
                  keepSuggestionsOnSuggestionSelected: true,
                  inputFieldConfiguration: FSuggesionInputFieldConfiguration(
                    decoration: decoration.copyWith(
                      suffixIcon: FContainer(
                        height: 36,
                        padding: EdgeInsets.only(bottom: 10, top: 0, right: 4),
                        child: FIconButton(
                          name: "close",
                          businessParent: this,
                          icon: FIcon(
                            Icons.close,
                            size: 20,
                          ),
                          onPressed: () {
                            controller.state.label = '';
                            controller.labelInputController.text = '';
                          },
                        ),
                      ),
                    ),
                    style: TextStyle(fontSize: 16),
                    maxLength: 10,
                    onChanged: (val) {
                      if (val.length > 10) {
                        return;
                      }
                      controller.state.label = val;
                    },
                    controller: controller.labelInputController,
                    focusNode: controller.labelFocus,
                  ),
                  optionItemBuilder: (_, data) {
                    return FListTile(
                      title: FText(
                        data,
                        style: const TextStyle(
                          color: Colors.grey,
                          fontSize: FInput.hintSize,
                        ),
                      ),
                    );
                  },
                  optionItemsFetcher: (pattern) {
                    return controller.fetchLabels(pattern);
                  },
                  onOptionSelected: (data) {
                    controller.setRoleLable(data);
                  },
                  noItemsFoundText: i18nBook.user.getObjectFailed.t,
                ),
              ),
            ),
            const FSizedBox(width: 5),
            FPrimaryButton(
              width: i18nBook.isCurrentRussian ? 100 : 90,
              height: 38,
              text: i18nBook.common.add.t,
              onPressed: () {
                controller.onAddLabel();
              },
            ),
            const FSizedBox(width: 10),
          ],
        ),
      ],
    );
  }
}
