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/Components/resource_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 _TranslationInputAndResourceContainerState extends State<TranslationInputAndResourceContainer> 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();
  }

  @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.45 : MediaQuery.of(context).size.height *0.5,
      //color: Colors.orange,
      width: MediaQuery.of(context).size.width *0.7,
      constraints: BoxConstraints(
        minHeight: 300,
        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!)
          ],
        ),
      ),
    );
  }

  getTranslation(BuildContext context, AppContext appContext, QuillEditorController controllerQuill, List<ToolBarStyle> customToolBarList, bool isTitle, bool isAudio, List<TranslationAndResourceDTO> 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,
          //color: Colors.blueAccent,
          height: widget.isTitle ? MediaQuery.of(context).size.height *0.32 : MediaQuery.of(context).size.height *0.37,
          child: !isAudio ?
          Column(
            children: [
              ToolBar(
                toolBarColor: kSecond,
                activeIconColor: kPrimaryColor,
                padding: const EdgeInsets.all(8),
                iconSize: 20,
                toolBarConfig: customToolBarList,
                controller: controllerQuill,
                customButtons: [],
              ),
              SingleChildScrollView(
                child: Column(
                  children: [
                    Container(
                      height: widget.isTitle ? MediaQuery.of(context).size.height *0.13 : MediaQuery.of(context).size.height *0.2,
                      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}'),
                      ),
                    ),
                    ValueListenableBuilder<String?>(
                      valueListenable: currentLanguage,
                      builder: (context, value, _) {
                        return ResourceInputContainer(
                            label: "Ressource à afficher :",
                            initialValue: newValues.where((element) => element.language! == value).first.resourceId,
                            color: kPrimaryColor,
                            inResourceTypes: [ResourceType.Image, ResourceType.ImageUrl, ResourceType.Video, ResourceType.VideoUrl, ResourceType.Audio],
                            isLanguageTab: true,
                            onChanged: (ResourceDTO resource) {
                              setState(() {
                                if(resource.id == null) {
                                  newValues.where((element) => element.language! == value).first.resourceId = null;
                                  newValues.where((element) => element.language! == value).first.resourceUrl = null;
                                  newValues.where((element) => element.language! == value).first.resourceType = null;
                                } else {
                                  newValues.where((element) => element.language! == value).first.resourceId = resource.id;
                                  newValues.where((element) => element.language! == value).first.resourceUrl = resource.url;
                                  newValues.where((element) => element.language! == value).first.resourceType = resource.type;
                                }
                              });
                            },
                            isSmall: true
                        );
                      }
                    ),
                  ],
                ),
              ),
            ],
          ) :
          Container(
            width: 250,
            height: 120,
            child: ValueListenableBuilder<String?>(
                valueListenable: currentLanguage,
                builder: (context, value, _) {
                  return AudioInputContainer(
                    initialValue: newValues.where((element) => element.language! == value).first.value,
                    color: kPrimaryColor,
                    onChanged: (ResourceDTO resource) {
                      newValues.where((element) => element.language! == value).first.value = resource.id;
                    },
                  );
                }
            ),
          ),
        ),
      ),
    );
  }
}

class TranslationInputAndResourceContainer extends StatefulWidget  {
  TranslationInputAndResourceContainer({
    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<TranslationAndResourceDTO> values;
  List<TranslationAndResourceDTO> newValues;
  Function onGetResult;
  int maxLines;
  bool isAudio;

  @override
  State<TranslationInputAndResourceContainer> createState() => _TranslationInputAndResourceContainerState();
}