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/converts/text_size_converter.dart';
import 'package:fis_lib_report/pages/components/input_text.dart';
import 'package:fis_lib_report/report/inputText.dart';
import 'package:fis_lib_report/report/multiSelected.dart';
import 'package:fis_lib_report/report/rt_color.dart';
import 'package:fis_lib_report/report/singleSelected.dart';
import 'package:flutter/material.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:fis_lib_report/report/inputText.dart';
import 'package:fis_ui/simple/select.dart';

class RMultiSelected extends StatefulWidget {
  final MultiSelected multiSelected;
  RMultiSelected(this.multiSelected);
  @override
  State<StatefulWidget> createState() {
    return _RRMultiSelectedState(multiSelected);
  }
}

class _RRMultiSelectedState extends State<RMultiSelected> {
  MultiSelected multiSelected;
  _RRMultiSelectedState(this.multiSelected);
  String _value = '';
  String? _selectedItemView = '';
  List<String>? _items = [];
  List<String>? _selectedItems = [];
  double _width = 0.0;
  TextStyle _textStyle = TextStyle();
  @override
  initState() {
    if (multiSelected.items!.isNotEmpty) {
      _items = multiSelected.items;
    }
    _width = PtToPxConverter.ptToPx(multiSelected.lineWidth);
    final fontColor = multiSelected.fontColor ?? RTColor.Black;
    _textStyle = TextStyle(
      color: Color.fromARGB(
          fontColor.a!, fontColor.r!, fontColor.g!, fontColor.b!),
      fontSize: PtToPxConverter.ptToPx(multiSelected.fontSize),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final background = multiSelected.background ?? RTColor(255, 255, 255, 255);

    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey, width: 1.0),
            borderRadius: BorderRadius.circular(0),
            color: Color.fromARGB(
                background.a!, background.r!, background.g!, background.b!),
          ),
          padding: const EdgeInsets.only(right: 25),
          width: _width,
          height: 22,
          child: Text(
            _selectedItemView!,
            maxLines: 1,
            style: _textStyle,
          ),
        ),
        _buildDropdownButton(),
      ],
    );
  }

  List<DropdownMenuItem<String>> buildItems() {
    return _items!.map((String e) {
      final active = e == _value;
      return DropdownMenuItem<String>(
        child: _OptionRow(
          multiSelected,
          e,
          isActive: active,
          height: 22,
          onTap: () {
            setState(() {
              if (_selectedItems!.contains(e)) {
                _selectedItems!.remove(e);
              } else {
                _selectedItems!.add(e);
              }
              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;
              final width = TextSizeConvert.getTextSize(text, _textStyle).width;
              if (_width < width - 25) {
                // _width = width - 25;
              }
            });
          },
          isSelected: _selectedItems!.contains(e),
        ),
        value: e,
      );
    }).toList();
  }

  Widget _buildDropdownButton() {
    if (_items!.isEmpty) {
      return const SizedBox();
    }
    var buttonDecoration = BoxDecoration(
      border: Border.all(color: Colors.transparent, width: 1.0),
      borderRadius: BorderRadius.circular(0),
      color: Colors.transparent,
    );
    return SizedBox(
      height: 22,
      width: _width,
      child: DropdownButtonHideUnderline(
        child: DropdownButton2<String>(
          dropdownMaxHeight: 300,
          buttonWidth: _width,
          itemPadding: const EdgeInsets.symmetric(horizontal: 1, vertical: 2),
          itemHeight: 28,
          //    itemPadding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
          isExpanded: false,
          dropdownOverButton: false,
          scrollbarAlwaysShow: true,
          scrollbarThickness: 4,
          scrollbarRadius: const Radius.circular(2),
          buttonPadding: const EdgeInsets.symmetric(horizontal: 4, vertical: 0),
          dropdownDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4),
          ),
          buttonDecoration: buttonDecoration,
          offset: const Offset(0, -4),
          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) {},
        ),
      ),
    );
  }
}

class _OptionRow extends StatefulWidget {
  _OptionRow(
    this.multiSelected,
    this.label, {
    Key? key,
    this.isActive = false,
    this.height,
    this.onTap,
    this.isSelected,
  }) : super(key: key);

  final Function? onTap;
  final MultiSelected multiSelected;
  final String label;
  final bool isActive;
  final double? height;
  bool? isSelected = false;

  @override
  State<StatefulWidget> createState() {
    return _OptionRowState(isSelected!);
  }
}

class _OptionRowState extends State<_OptionRow> {
  _OptionRowState(this.isSelected);
  bool? isSelected = false;

  @override
  Widget build(BuildContext context) {
    final color = widget.multiSelected.fontColor!;
    final background = widget.multiSelected.background!;
    final text = Text(
      widget.label,
      style: TextStyle(
        backgroundColor: Color.fromARGB(
            background.a!, background.r!, background.g!, background.b!),
        fontSize: PtToPxConverter.ptToPx(widget.multiSelected.fontSize),
        color: Color.fromARGB(color.a!, color.r!, color.g!, color.b!),
      ),
    );
    if (widget.height != null) {
      return GestureDetector(
        onTap: () {
          setState(() {
            isSelected = !isSelected!;
          });
          if (widget.onTap != null) {
            widget.onTap!.call();
          }
        },
        child: Container(
          color: Colors.white,
          alignment: Alignment.centerLeft,
          height: widget.height,
          width: PtToPxConverter.ptToPx(widget.multiSelected.lineWidth) - 34,
          child: Row(
            children: [
              Checkbox(
                onChanged: (bool? value) {
                  setState(() {
                    isSelected = value ?? false;
                  });
                  if (widget.onTap != null) {
                    widget.onTap!.call();
                  }
                },
                value: isSelected,
              ),
              Expanded(child: text),
            ],
          ),
        ),
      );
    } else {
      return text;
    }
  }
}