manager-app/lib/Components/translation_input_container.dart

import 'package:flutter/material.dart';
import 'package:manager_api_new/api.dart';
import 'package:manager_app/Components/audio_input_container.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:provider/provider.dart';
import 'package:quill_html_editor/quill_html_editor.dart';

import 'flag_decoration.dart';

class _TranslationInputContainerState extends State<TranslationInputContainer> with TickerProviderStateMixin {
  TabController? _tabController;
  QuillEditorController controllerQuill = QuillEditorController();
  ValueNotifier<String?>? currentLanguage;
  bool isInit = false;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: widget.newValues.length, vsync: this);
    currentLanguage = ValueNotifier<String>(widget.newValues.first.language!);

    controllerQuill.onEditorLoaded(() {
      print("onEditorLoaded");
      isInit = true;
    });

    Future.delayed(Duration(milliseconds: 500), () {
      print("Future.delayed");
      controllerQuill.clear();
      controllerQuill.insertText(widget.newValues[_tabController!.index].value!);
      isInit = true;
    });

    controllerQuill.onTextChanged((p0) async {
      var plainText = await controllerQuill.getPlainText();
      if(widget.isTitle) {
        if(plainText.length > 60) {
          print("to much text au dessus");
          controllerQuill.undo();
        }
      } else {
        if(plainText.length > 2500) {
          print("to much text description au dessus");
          controllerQuill.undo();
        }
      }
    });

    _tabController!.addListener(() {
      if (!_tabController!.indexIsChanging) {
        setState(() {
          currentLanguage!.value = widget.newValues[_tabController!.index].language;
          if(!widget.isAudio) {
            print("insert try without ress");
            print(widget.newValues[_tabController!.index].value!);
            controllerQuill.clear();
            controllerQuill.insertText(widget.newValues[_tabController!.index].value!);
          }
        });
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _tabController!.dispose();
  }

  getTranslation(BuildContext context, AppContext appContext, QuillEditorController controllerQuill, List<ToolBarStyle> customToolBarList, bool isTitle, bool isAudio, List<TranslationDTO> newValues, ValueNotifier<String?> currentLanguage) {
    return Padding(
      padding: const EdgeInsets.all(6.0),
      child: Padding(
        padding: const EdgeInsets.only(left: 8.0),
        child: Container(
          width: MediaQuery.of(context).size.width *0.7,
          height: widget.isTitle ? MediaQuery.of(context).size.height *0.25 : MediaQuery.of(context).size.height *0.4,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              !isAudio ?
              Column(
                children: [
                  ToolBar(
                    toolBarColor: kSecond,
                    activeIconColor: kPrimaryColor,
                    padding: const EdgeInsets.all(8),
                    iconSize: 20,
                    toolBarConfig: customToolBarList,
                    controller: controllerQuill,
                    customButtons: [],
                  ),
                  SingleChildScrollView(
                    child: Container(
                      height: widget.isTitle ? MediaQuery.of(context).size.height *0.13 : MediaQuery.of(context).size.height *0.35,
                      child: QuillHtmlEditor(
                        //text: newValues.where((element) => element.language! == currentLanguage.value).first.value!,
                        hintText: '',
                        controller: controllerQuill,
                        minHeight: widget.isTitle ? 80 : 240,
                        /*textStyle: _editorTextStyle,
                              hintTextStyle: _hintTextStyle,*/
                        hintTextAlign: TextAlign.start,
                        padding: const EdgeInsets.only(left: 10, right: 10, top: 5),
                        hintTextPadding: EdgeInsets.zero,
                        backgroundColor: kBackgroundColor,
                        ensureVisible: true,
                        inputAction: widget.isTitle ? InputAction.send : InputAction.newline, // don't accept enter if title
                        //onFocusChanged: (hasFocus) => debugPrint('has focus $hasFocus'),
                        //onTextChanged: (text) => debugPrint('widget text change $text'),
                        onTextChanged: (value) {
                          if(isInit) {
                            newValues.where((element) => element.language! == currentLanguage.value).first.value = value;
                          }
                        },
                        onEditorCreated: () => debugPrint('Editor has been loaded'),
                        onEditorResized: (height) =>
                            debugPrint('Editor resized $height'),
                        onSelectionChanged: (sel) =>
                            debugPrint('${sel.index},${sel.length}'),
                      ),
                    ),
                  ),
                ],
              )
              /*HtmlEditor(
                    controller: controller,
                    htmlEditorOptions: HtmlEditorOptions(
                      hint: "Your text here...",
                      initialText: newValues.where((element) => element.language == language).first.value!,
                      shouldEnsureVisible: true,
                    ),
                    htmlToolbarOptions: HtmlToolbarOptions(
                      toolbarPosition: ToolbarPosition.aboveEditor, //required to place toolbar anywhere!
                      //other options
                    ),
                    otherOptions: OtherOptions(
                      height: 400,
                    ),
                  )*/
              /*TextFormInputContainer(
                    label: label,
                    color: kWhite,
                    isTitle: isTitle,
                    initialValue: newValues.where((element) => element.language == language).first.value!,
                    onChanged: (value) {
                      newValues.where((element) => element.language == language).first.value = value;
                    },
                  )*/ :
              Container(
                width: 250,
                height: 120,
                child: ValueListenableBuilder<String?>(
                  valueListenable: currentLanguage,
                  builder: (context, value, _) {
                    return AudioInputContainer(
                      //label: "Audio :",
                      initialValue: newValues.where((element) => element.language! == value).first.value,
                      color: kPrimaryColor,
                      onChanged: (ResourceDTO resource) {
                        newValues.where((element) => element.language! == value).first.value = resource.id;
                      },
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final customToolBarList = widget.isTitle ? [
      ToolBarStyle.bold,
      ToolBarStyle.italic,
      ToolBarStyle.color,
      ToolBarStyle.background,
      ToolBarStyle.clean
    ] : [
      ToolBarStyle.bold,
      ToolBarStyle.italic,
      ToolBarStyle.color,
      ToolBarStyle.background,
      ToolBarStyle.listBullet,
      ToolBarStyle.listOrdered,
      ToolBarStyle.clean
    ];

    return Container(
      height: widget.isTitle ? MediaQuery.of(context).size.height *0.35 : MediaQuery.of(context).size.height *0.53,
      width: MediaQuery.of(context).size.width *0.7,
      constraints: BoxConstraints(
        minHeight: 200,
        minWidth: 300
      ),
      child: DefaultTabController(
        length: widget.newValues.length,
        child: Column(
          children: [
            RotatedBox(
              quarterTurns: 0, // Can be used to test vertical tab in case of smaller screen
              child: TabBar(
                indicatorColor: kPrimaryColor,
                //overlayColor: MaterialStateProperty().c,
                labelColor: kPrimaryColor,
                unselectedLabelColor: Colors.black,
                controller: _tabController,
                tabs: widget.newValues.map((v) => Tab(icon: FlagDecoration(language: v.language!))).toList(), // text: v.language!.toUpperCase(),
              ),
            ),
            getTranslation(context, Provider.of<AppContext>(context), controllerQuill, customToolBarList, widget.isTitle, widget.isAudio, widget.newValues, currentLanguage!)
            /*TabContainer(
                      radius: 0,
                      tabs: values.map((v) => v.language!.toUpperCase()).toList(),
                      children: getTranslations(context, Provider.of<AppContext>(context), controllerQuill, customToolBarList, label, isTitle, isAudio, newValues),

                      /*child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: getTranslations(context, Provider.of<AppContext>(context), controllerQuill, label, isTitle, isAudio, newValues),
                      ),*/
                    ),*/
          ],
        ),
      ),
    );
  }
}

class TranslationInputContainer extends StatefulWidget  {
  TranslationInputContainer({
    Key? key,
    required this.isTitle,
    required this.values,
    required this.newValues,
    required this.onGetResult,
    required this.maxLines,
    required this.isAudio,
  }) : super(key: key);

  bool isTitle;
  List<TranslationDTO> values;
  List<TranslationDTO> newValues;
  Function onGetResult;
  int maxLines;
  bool isAudio;

  @override
  State<TranslationInputContainer> createState() => _TranslationInputContainerState();
}