import React from "react";
import axios from "axios";
import MockAdapter from "axios-mock-adapter";
import "./styles.css";

// 서버 없이 테스트를 위해서 axios-mock-adapter 사용
const mock = new MockAdapter(axios);
mock.onPost("/fileupload").reply(200, {
  seq: 1
});

// 원래 소스는 `<img src="/download/${seq}" width="100%"/>`;
const buildImageHtml = (seq) =>
  `<img src="https://lahuman.github.io/assets/img/logo.png" width="100%"/>`;

export default function App() {
  const comment = React.useRef();

  const fileUpload = async (blob) => {
    const formData = new FormData();
    formData.append("file", blob);
    const { data: fileInfo } = await axios.post(`/fileupload`, formData);
    return fileInfo;
  };

  const focusMoveWithFile = () => {
    comment.current.focus();
    if (
      typeof window.getSelection !== "undefined" &&
      typeof document.createRange !== "undefined"
    ) {
      const range = document.createRange();
      range.selectNodeContents(comment.current);
      range.collapse(false);
      const sel = window.getSelection();
      if (!sel) return;
      sel.removeAllRanges();
      sel.addRange(range);
    }
  };

  return (
    <div
      ref={comment}
      contentEditable="true"
      className="comment"
      suppressContentEditableWarning
      onPaste={async (event) => {
        // event.preventDefault(); 이 없을 경우 upload와 상관 없이 이미지가 붙음
        event.preventDefault();
        const item = event.clipboardData.items[0];
        if (item.type.indexOf("image") === 0) {
          const blob = item.getAsFile();
          const { seq } = await fileUpload(blob);
          const text = `${comment.current.innerHTML}${buildImageHtml(seq)}`;
          comment.current.innerHTML = text;
          focusMoveWithFile();
        } else {
          // 이미지가 아닐 경우 text로 처리 
          const paste = event.clipboardData.getData("text");
          if (paste) {
            const selection = window.getSelection();
            if (!selection) return;
            if (selection && !selection.rangeCount) return;
            selection?.deleteFromDocument();
            selection?.getRangeAt(0).insertNode(document.createTextNode(paste));
          }
        }
      }}
      placeholder="글을 작성해주세요 (글 작성 꿀팁 : 여기에 이미지를 Ctrl+C, Ctrl+V로 바로 붙여넣기 할 수 있어요!)"
    />
  );
}