fis_lib_report/lib/pages/components/multi_selected.dart

import 'package:fis_lib_report/converts/pt_to_px_converter.dart';
import 'package:fis_lib_report/pages/components/widgets/option_row.dart';
import 'package:fis_lib_report/report/multi_selected.dart';
import 'package:fis_lib_report/report/rt_color.dart';
import 'package:fis_lib_report/report_info/multi_selected_info.dart';
import 'package:fis_lib_report/report_info/report_info.dart';
import 'package:fis_ui/index.dart';
import 'package:fis_ui/usual/select/dropdown_button2.dart';
import 'package:fis_ui/values/font_sizes.dart';
import 'package:flutter/material.dart';
// import 'package:dropdown_button2/dropdown_button2.dart';

class FMultiSelected extends StatefulWidget implements FWidget {
  final MultiSelected multiSelected;
  const FMultiSelected(this.multiSelected, {Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return _RRMultiSelectedState();
  }
}

class _RRMultiSelectedState extends State<FMultiSelected> {
  _RRMultiSelectedState();
  final String _value = '';
  String? _selectedItemView = '';
  List<String> _items = [];
  List<String> _selectedItems = [];
  double _width = 0.0;
  double _height = 0.0;
  double _fontSize = 0;
  MulitiSelectedInfo? _mulitiSelectedInfo;
  final EdgeInsetsGeometry _padding = const EdgeInsets.only(left: 4, right: 25);

  TextStyle _textStyle = const TextStyle();
  @override
  initState() {
    _initDatas();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final multiSelected = widget.multiSelected;
    final background = multiSelected.background ?? RTColor(255, 255, 255, 255);
    return Stack(
      children: [
        FContainer(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey, width: 1.0),
            borderRadius: BorderRadius.circular(4),
            color: Color.fromARGB(
                background.a!, background.r!, background.g!, background.b!),
          ),
          padding: _padding,
          width: _width,
          height: _height,
          child: FText(
            _selectedItemView!,
            maxLines: 1,
            style: _textStyle,
          ),
        ),
        _buildDropdownButton(),
      ],
    );
  }

  List<DropdownMenuItem<String>> buildItems() {
    return _items.map((String e) {
      final active = e == _value;
      return DropdownMenuItem<String>(
        child: FOptionRow(
          widget.multiSelected,
          e,
          isActive: active,
          height: _height,
          onTap: () {
            if (mounted) {
              setState(() {
                _onSelectedItem(e);
              });
            }
            if (_mulitiSelectedInfo != null) {
              _mulitiSelectedInfo!.selectedItems = _selectedItems;
            }
          },
          isSelected: _selectedItems.contains(e),
        ),
        value: e,
      );
    }).toList();
  }

  _onSelectedItem(String value) {
    if (mounted) {
      setState(() {
        if (_selectedItems.contains(value)) {
          _selectedItems.remove(value);
        } else {
          _selectedItems.add(value);
        }
        String text = '';
        _getSelectedItems();
      });
    }
  }

  Widget _buildDropdownButton() {
    if (_items.isEmpty) {
      return const FSizedBox();
    }
    var buttonDecoration = BoxDecoration(
      border: Border.all(color: Colors.transparent, width: 1.0),
      borderRadius: BorderRadius.circular(4),
      color: Colors.transparent,
    );
    return SizedBox(
      height: _height,
      width: _width,
      child: DropdownButtonHideUnderline(
        child: DropdownButton2<String>(
          dropdownMaxHeight: 300,
          buttonWidth: _width,
          itemPadding: const EdgeInsets.symmetric(horizontal: 0, vertical: 2),
          itemHeight: 28,
          iconSize: FFontSizes.H5,
          isExpanded: false,
          dropdownOverButton: false,
          scrollbarAlwaysShow: true,
          scrollbarThickness: 4,
          scrollbarRadius: const Radius.circular(2),
          //    buttonPadding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
          dropdownDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(0),
          ),
          buttonDecoration: buttonDecoration,
          selectedItemHighlightColor: Theme.of(context).secondaryHeaderColor,
          selectedItemBuilder: (_) => _selectedItems.map((e) {
            return SizedBox(
              width: _width - 34,
              child: Text(
                e,
                maxLines: 1,
              ),
            );
          }).toList(),
          value: null,
          items: buildItems(),
          onChanged: (v) {},
        ),
      ),
    );
  }

  void _initDatas() {
    final multiSelected = widget.multiSelected;
    final selectInfo = FReportInfo.instance.getElementInfo(multiSelected);
    if (selectInfo != null && _mulitiSelectedInfo != selectInfo) {
      if (_mulitiSelectedInfo != null) {
        _mulitiSelectedInfo!.onSelectedChange.dispose();
      }
      _mulitiSelectedInfo = selectInfo as MulitiSelectedInfo;
      _mulitiSelectedInfo!.onSelectedChange.dispose();
      _mulitiSelectedInfo!.onSelectedChange.addListener((sender, e) {
        if (mounted) {
          setState(() {
            _selectedItems = e;
            _getSelectedItems();
          });
        }
      });
    }
    if (multiSelected.items!.isNotEmpty) {
      _items = multiSelected.items!;
    }
    if (_mulitiSelectedInfo != null &&
        _mulitiSelectedInfo!.selectedItems != _selectedItems) {
      _selectedItems = _mulitiSelectedInfo!.selectedItems;
      _getSelectedItems();
    }
    _width = PtToPxConverter.ptToPx(multiSelected.lineWidth);
    final fontColor = multiSelected.fontColor ?? RTColor.Black;
    _fontSize = PtToPxConverter.ptToPx(multiSelected.fontSize);
    _height = _fontSize + 10;
    _textStyle = TextStyle(
      color: Color.fromARGB(
          fontColor.a!, fontColor.r!, fontColor.g!, fontColor.b!),
      fontSize: _fontSize > FFontSizes.H5 ? FFontSizes.H5 : _fontSize,
    );
  }

  void _getSelectedItems() {
    String text = '';
    for (var element in _selectedItems) {
      final index = _selectedItems.indexOf(element);
      if (index > 0) {
        text = text + ';' + element;
      } else if (index == 0) {
        text = element;
      } else if (_selectedItems.isEmpty) {
        text = '';
      }
    }
    _selectedItemView = text;
  }
}