import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:provider/provider.dart';
import 'package:quill_delta/quill_delta.dart';
import 'package:fcs/model/main_model.dart';
import 'package:fcs/fcs/common/pages/util.dart';
import 'package:fcs/widget/progress.dart';
import 'package:zefyr/zefyr.dart';

import '../fcs/common/helpers/theme.dart';

typedef void ProfileCallback();

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

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

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

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

    // Here we must load the document and pass it to Zefyr controller.
    final document = _loadDocument();
    _controller = ZefyrController(document);
    _focusNode = FocusNode();
  }

  /// Loads the document to be edited in Zefyr.
  NotusDocument _loadDocument() {
    MainModel mainModel = Provider.of<MainModel>(context, listen: false);
    String term = mainModel.setting.terms;

    NotusDocument doc;
    try {
      doc = NotusDocument.fromJson(jsonDecode(term));
    } catch (e) {}
    if (doc == null) {
      doc = NotusDocument();
    }
    return doc;
  }

  @override
  Widget build(BuildContext context) {
    MainModel mainModel = Provider.of<MainModel>(context);

    var singleChildScrollView = SingleChildScrollView(
      padding: EdgeInsets.only(
        left: 25.0,
        right: 25.0,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
              width: 300,
              height: 300,
              child: Card(child: Markdown(data: mainModel.setting.terms))),
        ],
      ),
    );

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Terms",
          ),
          backgroundColor: primaryColor,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.save),
              onPressed: () {
                _save();
              },
            )
          ],
        ),
        body: ZefyrScaffold(
          child: ZefyrTheme(
            data: ZefyrThemeData().copyWith(),
            child: ZefyrEditor(
              padding: EdgeInsets.all(16),
              controller: _controller,
              focusNode: _focusNode,
            ),
          ),
        ),
      ),
    );
  }

  _save() {
    setState(() {
      _isLoading = true;
    });
    try {
      final contents = jsonEncode(_controller.document);
      print('contents => $contents');
      widget.onChangedData(_controller.document);
      // MainModel mainModel = Provider.of<MainModel>(context, listen: false);
      // mainModel.updateTerms(contents);
    } catch (e) {
      showMsgDialog(context, "Error", e.toString());
    } finally {
      _isLoading = false;
      Navigator.pop(context);
    }
  }
}