import "vditor/dist/index.css";
import Vditor from "vditor";
import { useEffect, useRef } from "react";
import "./index.less";
import { message } from "antd";

interface IProps {
  onChange?: Function;
  styles?: React.CSSProperties;
  id: string;
  defaultValue?: string;
}

const emoji = {
  "+1": "👍",
  "-1": "👎",
  confused: "😕",
  eyes: "👀️",
  heart: "❤️",
  rocket: "🚀️",
  smile: "😄",
  tada: "🎉️",
};

const toolbar = [
  "emoji",
  "headings",
  "bold",
  "italic",
  "strike",
  "link",
  "|",
  "list",
  "ordered-list",
  "check",
  "outdent",
  "indent",
  "|",
  "quote",
  "line",
  "code",
  "inline-code",
  "insert-before",
  "insert-after",
  "|",
  "upload",
  // "record",
  "table",
  "|",
  "undo",
  "redo",
  "|",
  "fullscreen",
  "edit-mode",
  {
    name: "more",
    toolbar: [
      "both",
      "code-theme",
      "content-theme",
      "export",
      "outline",
      "preview",
      "devtools",
      "info",
      "help",
    ],
  },
];

export default function Guide(props: IProps) {
  const vditorRef = useRef<Vditor>();

  const submitTool = {
    name: "submit",
    tipPosition: "s",
    tip: "提交",
    className: "right",
    icon: '<svg viewBox="0 0 1024 1024"><path d="M385 840.5c-20.8 0-41.7-7.9-57.6-23.8L87.6 576.9c-31.8-31.8-31.8-83.3 0-115.1s83.3-31.8 115.1 0l239.8 239.8c31.8 31.8 31.8 83.3 0 115.1-15.9 15.9-36.7 23.8-57.5 23.8z" fill="#1296db" p-id="25510"></path><path d="M384.6 840.5c-20.8 0-41.7-7.9-57.6-23.8-31.8-31.8-31.8-83.3 0-115.1l494.2-494.2c31.8-31.8 83.3-31.8 115.1 0s31.8 83.3 0 115.1L442.2 816.7c-15.9 15.9-36.8 23.8-57.6 23.8z" fill="#1296db"></path></svg>',
    click() {
      const value = vditorRef.current?.getValue();
      const html = vditorRef.current?.getHTML();
      if (props.onChange) props.onChange({ value, html });
    },
  };

  useEffect(() => {
    if (props.defaultValue)
      vditorRef.current = new Vditor("vditor", {
        height: 600,
        cache: {
          id: props.id,
          enable: false,
        },
        toolbar: [...toolbar, "|", submitTool],
        value: props.defaultValue ?? "",
        hint: { delay: 200, emoji },
        counter: { enable: true },
        preview: { actions: ["desktop", "mobile"] },
        after: () => console.log("[info] vditor init success..."),
        upload: {
          accept: "image/*",
          url: "/api/vod/oss/image/upload",
          multiple: false,
          success(_, res) {
            const { code, data, msg } = JSON.parse(res);
            if (code === 10000) {
              message.success("上传成功");
              const { name, url } = data;
              vditorRef.current?.insertValue(`![${name}](${url})`);
            } else {
              message.error(msg);
            }
          },
        },
      });
  }, [props.defaultValue]);

  return (
    <div style={{ ...props.styles }}>
      <div id="vditor" className="vditor" />
    </div>
  );
}