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/report/multiSelected.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:flutter/material.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

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

class _RRMultiSelectedState extends State<RMultiSelected> {
  _RRMultiSelectedState();
  final String _value = '';
  String? _selectedItemView = '';
  List<String> _items = [];
  List<String> _selectedItems = [];
  double _width = 0.0;
  MulitiSelectedInfo? _mulitiSelectedInfo;

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

  @override
  Widget build(BuildContext context) {
    _initDatas();
    final multiSelected = widget.multiSelected;
    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(
          widget.multiSelected,
          e,
          isActive: active,
          height: 22,
          onTap: () {
            setState(() {
              _onSelectedItem(e);
            });
            if (_mulitiSelectedInfo != null) {
              _mulitiSelectedInfo!.selectedItems = _selectedItems;
            }
          },
          isSelected: _selectedItems.contains(e),
        ),
        value: e,
      );
    }).toList();
  }

  _onSelectedItem(String value) {
    setState(() {
      if (_selectedItems.contains(value)) {
        _selectedItems.remove(value);
      } else {
        _selectedItems.add(value);
      }
      String text = '';
      _getSelectedItems();
      final width =
          TextSizeConvert.getTextSize(_selectedItemView ?? '', _textStyle)
              .width;
      if (_width < width - 25) {
        // _width = width - 25;
      }
    });
  }

  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) {},
        ),
      ),
    );
  }

  void _initDatas() {
    final multiSelected = widget.multiSelected;
    final selectInfo = ReportInfo.instance.getElementInfo(multiSelected);
    if (selectInfo != null && _mulitiSelectedInfo != selectInfo) {
      if (_mulitiSelectedInfo != null) {
        _mulitiSelectedInfo!.onSelectedChange.dispose();
      }
      _mulitiSelectedInfo = selectInfo as MulitiSelectedInfo;
      _mulitiSelectedInfo!.onSelectedChange.addListener((sender, e) {
        setState(() {
          _selectedItems = e;
          _getSelectedItems();
        });
      });
    }
    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),
    );
  }

  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;
  }
}

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;
    }
  }
}