import 'dart:convert';

import 'package:fcs/domain/vo/term.dart';
import 'package:fcs/helpers/theme.dart';
import 'package:fcs/pages/term/model/term_model.dart';
import 'package:fcs/pages/main/util.dart';
import 'package:fcs/pages/widgets/local_text.dart';
import 'package:fcs/pages/widgets/progress.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:zefyr/zefyr.dart';

typedef void ProfileCallback();

class TermEdit extends StatefulWidget {
  final Term term;
  TermEdit({this.term});
  @override
  _TermEditState createState() => _TermEditState();
}

class _TermEditState extends State<TermEdit> {
  /// Allows to control the editor and the document.
  ZefyrController _controllerEng;
  ZefyrController _controllerMm;

  /// Zefyr editor like any other input field requires a focus node.
  FocusNode _focusNodeEng;
  FocusNode _focusNodeMm;
  bool _isLoading;

  @override
  void initState() {
    super.initState();
    _isLoading = false;

    // Here we must load the document and pass it to Zefyr controller.
    _controllerEng = ZefyrController(_loadDocument(widget.term.termEng));
    _controllerMm = ZefyrController(_loadDocument(widget.term.termMm));
    _focusNodeEng = FocusNode();
    _focusNodeMm = FocusNode();
  }

  /// Loads the document to be edited in Zefyr.
  NotusDocument _loadDocument(String data) {
    NotusDocument doc;
    try {
      doc = NotusDocument.fromJson(jsonDecode(data));
    } catch (e) {}
    if (doc == null) {
      doc = NotusDocument();
    }
    return doc;
  }

  @override
  Widget build(BuildContext context) {
    final savebtn =
        fcsButton(context, getLocalString(context, "btn.save"), callack: _save);

    return DefaultTabController(
      length: 2,
      child: LocalProgress(
        inAsyncCall: _isLoading,
        child: Scaffold(
          appBar: AppBar(
            title: LocalLargeTitle(
              context,
              "term",
              color: primaryColor,
            ),
            leading: IconButton(
              icon: Icon(
                CupertinoIcons.back,
                color: primaryColor,
                size: 30,
              ),
              onPressed: () {
                showConfirmDialog(context, "back.button_confirm", () {
                  Navigator.of(context).pop();
                });
              },
            ),
            shadowColor: Colors.transparent,
            backgroundColor: Colors.white,
            actions: [
              IconButton(
                  onPressed: _unfocus,
                  icon: Icon(Icons.check, color: primaryColor))
            ],
            bottom: TabBar(
              onTap: (index) {
                // Tab index when user select it, it start from zero
              },
              tabs: [
                Tab(
                    icon: Image.asset(
                  'icons/flags/png/us.png',
                  package: 'country_icons',
                  fit: BoxFit.fitWidth,
                  width: 25,
                )),
                Tab(
                    icon: Image.asset(
                  'icons/flags/png/mm.png',
                  package: 'country_icons',
                  fit: BoxFit.fitWidth,
                  width: 25,
                )),
              ],
            ),
          ),
          body: ListView(
            children: [
              Container(
                height: MediaQuery.of(context).size.height - 200,
                child: TabBarView(
                  children: [
                    textEditor(_controllerEng, _focusNodeEng),
                    textEditor(_controllerMm, _focusNodeMm),
                  ],
                ),
              ),
              savebtn,
            ],
          ),
        ),
      ),
    );
  }

  Widget textEditor(ZefyrController controller, FocusNode focusNode) {
    return ListView(
      children: [
        Container(
          height: MediaQuery.of(context).size.height - 200,
          child: ZefyrScaffold(
            child: ZefyrTheme(
              data: ZefyrThemeData().copyWith(
                defaultLineTheme: LineTheme(
                  padding: EdgeInsets.all(0),
                  textStyle: TextStyle(fontFamily: "Myanmar3"),
                ),
              ),
              child: ZefyrEditor(
                autofocus: false,
                padding: EdgeInsets.all(16),
                controller: controller,
                focusNode: focusNode,
              ),
            ),
          ),
        ),
        // savebtn,
        SizedBox(
          height: 10,
        )
      ],
    );
  }

  _unfocus() {
    FocusScope.of(context).unfocus();
  }

  _save() async {
    setState(() {
      _isLoading = true;
    });
    try {
      final contentsEng = jsonEncode(_controllerEng.document);
      final contentsMm = jsonEncode(_controllerMm.document);
      print('contents => $contentsEng');
      TermModel termModel = Provider.of<TermModel>(context, listen: false);
      await termModel.saveTerm(Term(termEng: contentsEng, termMm: contentsMm));
    } catch (e) {
      showMsgDialog(context, "Error", e.toString());
    } finally {
      _isLoading = false;
      Navigator.pop(context);
    }
  }
}