/*
 * @Description: quill 编辑器
 * @Author: tangjiang
 * @Github: 
 * @Date: 2019-12-18 08:49:30
 * @LastEditors  : tangjiang
 * @LastEditTime : 2020-01-09 11:01:51
 */
import './index.scss';
import 'quill/dist/quill.core.css'; // 核心样式
import 'quill/dist/quill.snow.css'; // 有工具栏
import 'quill/dist/quill.bubble.css'; // 无工具栏
import 'katex/dist/katex.min.css'; // katex 表达式样式
import React, { useState, useRef, useEffect } from 'react';
import Quill from 'quill';
import katex from 'katex';
import deepEqual from './deepEqual.js'
import { fetchUploadImage } from '../../services/ojService.js';
import { getImageUrl } from 'educoder'
import ImageBlot from './ImageBlot';
import { Modal } from 'antd';
// import Toolbar from 'quill/modules/toolbar';
import  FillBlot from './FillBlot';
const Size = Quill.import('attributors/style/size');
const Font = Quill.import('formats/font');
const { confirm } = Modal;
// const Color = Quill.import('attributes/style/color');
Size.whitelist = ['12px', '14px', '16px', '18px', '20px', false];
Font.whitelist = ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif'];

window.Quill = Quill;
window.katex = katex;
Quill.register(ImageBlot);
Quill.register(Size);
Quill.register(Font, true);
// Quill.register({'modules/toolbar': Toolbar});
Quill.register(FillBlot);
// Quill.register(Color);


function QuillForEditor ({
  placeholder,
  readOnly,
  autoFocus,
  options,
  value,
  imgAttrs = {}, // 指定图片的宽高
  style = {},
  wrapStyle = {},
  showUploadImage,
  onContentChange,
  // addFill, // 点击填空成功的回调
  // getQuillContent
}) {
  // toolbar 默认值
  const defaultConfig = [
    'bold', 'italic', 'underline',
    {size: ['12px', '14px', '16px', '18px', '20px']},
    {align: []}, {list: 'ordered'}, {list: 'bullet'}, // 列表
    {script: 'sub'}, {script: 'super'},
    { 'color': [] }, { 'background': [] }, 
    {header: [1,2,3,4,5,false]},
    'blockquote', 'code-block',
    'link', 'image', 'video',
    'formula',
    'clean'
  ];

  const editorRef = useRef(null);
  // quill 实例
  const [quill, setQuill] = useState(null);  
  const [selection, setSelection] = useState(null);
  const [fillCount, setFillCount] = useState(0);
  const [quillCtx, setQuillCtx] = useState({});

  // 文本内容变化时
  const handleOnChange = content => {
    // getQuillContent && getQuillContent(quill);
    onContentChange && onContentChange(content, quill);
  };
  
  const renderOptions = options || defaultConfig;

  const bindings = {
    tab: {
      key: 9,
      handler: function () {
        console.log('调用了tab=====>>>>');
      }
    },
    enter: {
      key: 'Enter',
      handler: function () {
        console.log('enter====>>>>>>');
      }
    },
    backspace: {
      key: 'Backspace',
      handler: function (range, context) {
        console.log('调用了删除按钮', range, context);
        // 1. 获取删除的文件
        // 2. 判断删除的文件中包含空格的个数
        // 3. 循环调用删除方法
        const r = window.confirm('确定要删除吗?')
        console.log('+++++', quill);
        if (r) {
          // 调用传入的删除事件
          return true
        } else {
          return false;
        }        
      }
    }
  };
  // quill 配置信息
  const quillOption = {
    modules: {
      toolbar: renderOptions,
      keyboard: {
        bindings: bindings
      }
      // toolbar: {
      //   container: renderOptions
      // }
    },
    readOnly,
    placeholder,
    theme: readOnly ? 'bubble' : 'snow',
  };


  useEffect(() => {

    const quillNode = document.createElement('div');
    editorRef.current.appendChild(quillNode);
    const _quill = new Quill(editorRef.current, quillOption);

    // _quill.keyboard.addBinding({
    //   key: 'tab'
    // }, function (range, context) {
    //   console.log('点击了键盘的删除按钮: ', range, context);
    // });

    setQuill(_quill);
    // 处理图片上传功能
    _quill.getModule('toolbar').addHandler('image', (e) => {
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');
      input.click();

      input.onchange = async (e) => {
        const file = input.files[0]; // 获取文件信息
        const formData = new FormData();
        formData.append('file', file);

        const range = _quill.getSelection(true);
        let fileUrl = ''; // 保存上传成功后图片的url
        // 上传文件
        const result = await fetchUploadImage(formData);
        // 获取上传图片的url
        if (result.data && result.data.id) {
          fileUrl = getImageUrl(`api/attachments/${result.data.id}`);
        }
        // 根据id获取文件路径
        const { width, height } = imgAttrs;
        // console.log('上传图片的url:', fileUrl);
        if (fileUrl) {
          _quill.insertEmbed(range.index, 'image', {
            url: fileUrl,
            alt: '图片信息',
            onClick: showUploadImage,
            width,
            height
          }); 
        }
      }
    });

    _quill.getModule('toolbar').addHandler('fill', (e) => {
      setFillCount(fillCount + 1);
      const range = _quill.getSelection(true);
      _quill.insertText(range.index, '▁');
      // 点击填空图标时，插入一个下划线
      // 1. 获取编辑器内容
    });

    // TODO 
    /**
     * 1.获取键盘删除事件
     * 2.点击时获取删除的叶子节点  getLeaf(range.index)
     */
  }, []);
  
  // 设置值 
  useEffect(() => {
    if (!quill) return

    const previous = quill.getContents()
   
    if (value && value.hasOwnProperty('ops')) {
      // console.log(value.ops);
      const ops = value.ops || [];
      ops.forEach((item, i) => {
        if (item.insert['image']) {
          item.insert['image'] = Object.assign({}, item.insert['image'], {style: { cursor: 'pointer' }, onclick: (url) => showUploadImage(url)});
        }
      });
    }

    const current = value
    // console.log('+++++', current);
    if (!deepEqual(previous, current)) {
      setSelection(quill.getSelection())
      if (typeof value === 'string') {
        quill.clipboard.dangerouslyPasteHTML(value, 'api')
      } else {
        quill.setContents(value)
      }
    }
  }, [quill, value, setQuill]);

  // 清除选择区域
  useEffect(() => {
    if (quill && selection) {
      quill.setSelection(selection)
      setSelection(null)
    }
  }, [quill, selection, setSelection]);

  // 设置placeholder值
  useEffect(() => {
    if (!quill || !quill.root) return;
    quill.root.dataset.placeholder = placeholder;
  }, [quill, placeholder]);

  // 处理内容变化
  useEffect(() => {
    if (!quill) return;
    if (typeof handleOnChange !== 'function') return;
    let handler;
    quill.on(
      'text-change', 
      (handler = (delta, oldDelta, source) => {
        // let del = false;
        // let delLen = 1;
        // delta.ops.forEach(o => {
        //   // 存在删除并且只删除一个
        //   if (o.delete) {
        //     del = true;
        //   }
        // });
        // 删除编辑器内容
        // if (del) {
        //   delLen = delta.ops[0].retain || 1; // 删除数组的长度
        //   // 获取删除的内容并判断其它是否有填空内容
        //   console.log('原编辑器内容', oldDelta);
        //   console.log('编辑器内容', quillCtx);
        // }
        // 获取删除的内容
        // oldDelta
        // if (del) {
        //   const ops = oldDelta.ops;
        //   const len = ops.length;
        //   // if (ops[len - 1] && ops[len - 1].insert) {
        //   //   const str = ops[len - 1].insert;
        //   //   const _len = str.length;
        //   //   const _last = str.substr(_len - 1);
        //   //   console.log('删除的一项', _last);
        //   // }
        // }
        const _ctx = quill.getContents();
        setQuillCtx(_ctx);
        handleOnChange(quill.getContents()); // getContents: 检索编辑器内容
      })
    );
    return () => {
      quill.off('text-change', handler);
    }
  }, [quill, handleOnChange]);

  useEffect(() => {
    if (!quill) return;
    if (autoFocus) {
      quill.focus();
    }
  }, [quill, autoFocus]);

  // 返回结果
  return (
      <div className='quill_editor_for_react_area' style={wrapStyle}>
        <div ref={editorRef} style={style}></div>
      </div>
  );
}

export default QuillForEditor;