// The editor creator to use.
import ClassicEditorBase from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";

import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
import UploadAdapter from "@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter";
import Autoformat from "@ckeditor/ckeditor5-autoformat/src/autoformat";
import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
import BlockQuote from "@ckeditor/ckeditor5-block-quote/src/blockquote";
import EasyImage from "@ckeditor/ckeditor5-easy-image/src/easyimage";
import Heading from "@ckeditor/ckeditor5-heading/src/heading";
import Image from "@ckeditor/ckeditor5-image/src/image";
import ImageCaption from "@ckeditor/ckeditor5-image/src/imagecaption";
import ImageStyle from "@ckeditor/ckeditor5-image/src/imagestyle";
import ImageToolbar from "@ckeditor/ckeditor5-image/src/imagetoolbar";
import ImageUpload from "@ckeditor/ckeditor5-image/src/imageupload";
import Link from "@ckeditor/ckeditor5-link/src/link";
import List from "@ckeditor/ckeditor5-list/src/list";
import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";

import Alignment from "@ckeditor/ckeditor5-alignment/src/alignment"; // <--- 添加在此处

export default class ClassicEditor extends ClassicEditorBase {}

// 引入所需插件.
ClassicEditor.builtinPlugins = [
  Essentials,
  UploadAdapter,
  Autoformat,
  Bold,
  Italic,
  BlockQuote,
  EasyImage,
  Heading,
  Image,
  ImageCaption,
  ImageStyle,
  ImageToolbar,
  ImageUpload,
  Link,
  List,
  Paragraph,
  Alignment, // <--- 添加在此处
];

// 编辑器配置.
ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      "heading",
      "|",
      "alignment", // <--- 添加在此处
      "bold",
      "italic",
      "link",
      "bulletedList",
      "numberedList",
      "imageUpload",
      "blockQuote",
      "undo",
      "redo",
    ],
  },
  image: {
    toolbar: [
      "imageStyle:full",
      "imageStyle:side",
      "|",
      "imageTextAlternative",
    ],
  },
  // 如果要改成中文,将 language 改为 zh
  // 注:这里要和webpack.config.js文件里的语言保持一致
  language: "en",
};

import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
import FileRepository from "@ckeditor/ckeditor5-upload/src/filerepository";
import OSS from "ali-oss";

const config = {
  region: "<你的 region>",
  accessKeyId: "<你的 AccessKeyId>",
  accessKeySecret: "<你的 AccessKeySecret>",
  bucket: "你的 bucket name",
  savePath: "images/",
};

const client = new OSS({
  region: config.region,
  accessKeyId: config.accessKeyId,
  accessKeySecret: config.accessKeySecret,
  bucket: config.bucket,
});

const random_string = function (len) {
  len = len || 32;
  let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
  let maxPos = chars.length;
  let pwd = "";
  for (let i = 0; i < len; i++) {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
};

const today = function () {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let date = now.getDate();

  return year + "-" + month + "-" + date;
};

const imgPath = function (img) {
  img = img || ".png";
  let path = config.savePath + today() + "/";
  let name = random_string() + img;
  return path + name;
};
// 自定义插件需要从Plugin继承
export default class AliUploadAdapter extends Plugin {
  static get requires() {
    return [FileRepository];
  }

  static get pluginName() {
    return "ali-ckeditor-upload";
  }

  init() {
    this.editor.plugins.get(FileRepository).createUploadAdapter = (loader) => {
      return new Adapter(loader);
    };
  }
}

class Adapter {
  constructor(loader) {
    this.loader = loader;
  }

  // 开始上传过程。
  upload() {
    return this.loader.file.then(
      (file) =>
        new Promise((resolve, reject) => {
          this._initListeners(resolve, reject, file);
          this._sendRequest(file);
        })
    );
  }

  async _initListeners(resolve, reject, file) {
    // 使用其他存储服务器时,在此处修改下面代码,将 file 上传即可
    try {
      let name = imgPath(file.name);
      // 生成随机图片链接
      let url = `http://${config.bucket}.${config.region}.aliyuncs.com/` + name;
      let result = await client.multipartUpload(name, file, {
        progress: function (p) {
          // 进度监听
          // console.log(Math.round(p * 100));
        },
      });
      resolve({
        default: url,
      });
    } catch (e) {
      console.log(e);
    }
  }

  _sendRequest(file) {
    const data = new FormData();
    data.append("upload", file);
  }
}