import 'package:fis_lib_report/converts/pt_to_px_converter.dart';
import 'package:fis_lib_report/report/singleSelected.dart';
import 'package:fis_lib_report/report_info/report_info.dart';
import 'package:fis_lib_report/report_info/single_selected_info.dart';
import 'package:flutter/material.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:fis_ui/simple/select.dart';

class RSingleSelected extends StatefulWidget {
  SingleSelected singleSelected;
  RSingleSelected(this.singleSelected);
  @override
  State<StatefulWidget> createState() {
    return _RSingleSelectState();
  }
}

class _RSingleSelectState extends State<RSingleSelected> {
  late SingleSelected singleSelected;
  _RSingleSelectState();
  String _value = '';
  List<String>? _items = [];
  SingleSelectedInfo? _singleSelectedInfo;

  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    singleSelected = widget.singleSelected;
    final selectInfo = ReportInfo.instance.getElementInfo(singleSelected);
    if (selectInfo != null && _singleSelectedInfo != selectInfo) {
      _singleSelectedInfo = selectInfo as SingleSelectedInfo;
      _singleSelectedInfo!.onSelectedChange.addListener((sender, e) {
        if (_singleSelectedInfo!.items!.contains(e)) {
          setState(() {
            _value = _singleSelectedInfo!.selectedItem;
          });
        }
      });
    }
    if (singleSelected.items!.isNotEmpty) {
      _items = singleSelected.items;
    }
    if (_items!.isEmpty) {
      return const SizedBox();
    }
    var buttonDecoration = BoxDecoration(
      border: Border.all(color: Colors.grey, width: 0.8),
      borderRadius: BorderRadius.circular(0),
      color: Colors.white,
    );
    if (_singleSelectedInfo!.selectedItem.isNotEmpty &&
        _singleSelectedInfo!.selectedItem != _value) {
      _value = _singleSelectedInfo!.selectedItem;
    }
    return SizedBox(
      height: 24,
      child: DropdownButtonHideUnderline(
        child: DropdownButton2<String>(
          dropdownMaxHeight: 280,
          buttonWidth: PtToPxConverter.ptToPx(singleSelected.lineWidth),
          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: 2),
          dropdownDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4),
          ),
          buttonDecoration: buttonDecoration,
          offset: const Offset(0, -4),
          selectedItemHighlightColor: Theme.of(context).secondaryHeaderColor,
          selectedItemBuilder: (_) => _items!
              .map((e) => _OptionRow(
                    singleSelected,
                    e,
                    height: 22,
                  ))
              .toList(),
          value: _value.isEmpty ? null : _value,
          items: buildItems(),
          onChanged: (v) {
            setState(() {
              if (_singleSelectedInfo != null) {
                _singleSelectedInfo!.selectedItem = v!;
              }
              _value = v!;
            });
          },
        ),
      ),
    );
  }

  List<DropdownMenuItem<String>> buildItems() {
    return _items!.map((String e) {
      final active = e == _value;
      return DropdownMenuItem<String>(
        child: _OptionRow(singleSelected, e, isActive: active),
        value: e,
      );
    }).toList();
  }
}

class _OptionRow extends StatelessWidget {
  _OptionRow(
    this.singleSelected,
    this.label, {
    Key? key,
    this.isActive = false,
    this.height,
  }) : super(key: key);

  SingleSelected singleSelected;
  final String label;
  final bool isActive;
  final double? height;

  @override
  Widget build(BuildContext context) {
    final color = singleSelected.fontColor!;
    final background = singleSelected.background!;
    final text = Text(
      label,
      style: TextStyle(
        backgroundColor: Color.fromARGB(
            background.a!, background.r!, background.g!, background.b!),
        fontSize: PtToPxConverter.ptToPx(singleSelected.fontSize),
        color: Color.fromARGB(color.a!, color.r!, color.g!, color.b!),
      ),
    );
    if (height != null) {
      return Container(
        alignment: Alignment.centerLeft,
        height: height,
        child: text,
      );
    } else {
      return text;
    }
  }
}