import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:manager_api_new/api.dart';
import 'package:manager_app/constants.dart';

class DropDownInputContainerCategories extends StatefulWidget {
  final String label;
  final List<CategorieDTO> categories;
  final CategorieDTO? initialValue;
  final ValueChanged<CategorieDTO>? onChange;
  const DropDownInputContainerCategories({
    Key? key,
    required this.label,
    required this.categories,
    required this.initialValue,
    this.onChange,
  }) : super(key: key);

  @override
  _DropDownInputContainerCategoriesState createState() => _DropDownInputContainerCategoriesState();
}

class _DropDownInputContainerCategoriesState extends State<DropDownInputContainerCategories> {
  List<CategorieDTO> categoriesToShow = [];
  CategorieDTO? selectedCategorieDTO;

  @override
  void initState() {
    if(widget.initialValue != null) {
      selectedCategorieDTO = widget.categories.firstWhere((element) => element.id == widget.initialValue!.id);
    }
    List<TranslationDTO> label = [];
    label.add(TranslationDTO(language: "FR", value: "Aucune catégorie"));
    categoriesToShow.add(CategorieDTO(order: -1, label: label));
    categoriesToShow.addAll(widget.categories);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    /*final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;*/

    return Row(
      children: [
        Align(
            alignment: AlignmentDirectional.centerStart,
            child: Text(widget.label, style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300))
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: DropdownButton<CategorieDTO>(
            value: selectedCategorieDTO,
            icon: const Icon(Icons.arrow_downward),
            iconSize: 24,
            elevation: 16,
            style: const TextStyle(color: kWhite),
            underline: Container(
              height: 2,
              color: kPrimaryColor,
            ),
            onChanged: (CategorieDTO? newValue) {
              setState(() {
                selectedCategorieDTO = newValue!;
                widget.onChange!(selectedCategorieDTO!);
              });
            },
            items: categoriesToShow.map<DropdownMenuItem<CategorieDTO>>((CategorieDTO value) {
              return DropdownMenuItem<CategorieDTO>(
                value: value,
                child: HtmlWidget(
                    value.label == null ? "" : value.label![0].value!,
                    textStyle: TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.w400)
                ),
              );
            }).toList(),
          ),
        ),
      ],
    );
  }

}