const mouseDownCoords = { x: 0, y: 0 };

const setMouseDownCoords = (e) => {
   mouseDownCoords.x = e.clientX
   mouseDownCoords.y = e.clientY
}

/**
  * テキスト入力内の指定された選択箇所におけるspanの絶対位置のx、y座標を返却
  * @param {object} input - 座標を取得する入力要素
  * @param {number} selectionPoint - 入力の選択箇所
 */
const getCursorXY = (input, selectionPoint) => {
  const {
    offsetLeft: inputX,
    offsetTop: inputY,
  } = input

  // 入力のクローンとなるダミー要素を作成
  const div = document.createElement('div')

  // 入力の計算されたスタイルを取得し、ダミー要素にコピー
  const copyStyle = getComputedStyle(input)
  for (const prop of copyStyle) {
    div.style[prop] = copyStyle[prop]
  }

  div.style.position = "fixed";
  div.style.top = "0px";
  div.style.left = "0px";
  div.style.opacity = 0;

  // <input/>の場合空白を置き換える
  const swap = '＊'
  const inputValue = input.tagName === 'INPUT' ? input.value.replace(/ /g, swap) : input.value

  // テキストエリアの選択箇所までのdivの内容を設定する
  const textContent = inputValue.substring(0, selectionPoint)

  // ダミー要素divのテキストコンテンツを設定
  div.textContent = textContent
  if (input.tagName === 'TEXTAREA') div.style.height = 'auto'
  if (input.tagName === 'INPUT') div.style.width = 'auto'

  // span要素を作成してキャレット位置を取得する
  const span = document.createElement('span')
  span.textContent = inputValue.substring(selectionPoint) || '.'

  // ダミー要素にspanマーカーを追加
  div.appendChild(span)

  // ダミー要素をbodyに追加
  document.body.appendChild(div)
  const { offsetLeft: spanX, offsetTop: spanY } = span

  document.body.removeChild(div)
  return {
    x: inputX + spanX,
    y: inputY + spanY,
  }
}

/**
 * ユーザーが入力コンテンツを選択した位置にマーカーを表示
 * @param {object} e - テキスト選択のmouseupイベント
 */
/**
 * ユーザーが入力コンテンツを選択した位置にマーカーを表示
 * @param {object} e - テキスト選択のmouseupイベント
 */
const setMarkerNearSelectionArea = e => {
  // grab the input element
  const { currentTarget: input } = e
  // 入力に関連するプロパティを取得する
  const {
    offsetLeft,
    offsetWidth,
    scrollLeft,
    scrollTop,
    selectionStart,
    selectionEnd,
  } = input

  /**
   * マーカーの座標を選択範囲を元に設定する
   */
  const setMarkerPosition = () => {
    // 選択開始位置の座標を取得
    const { y: startTop, x: startLeft } = getCursorXY(input, selectionStart)
    // 選択終了位置の座標を取得
    const { y: endTop, x: endLeft } = getCursorXY(input, selectionEnd)

    const { paddingRight, fontSize } = getComputedStyle(input)
    const fontSizeNumber = parseInt(fontSize.replace("px", ""))

    // 選択範囲の上部に表示するので endTop は無視
    // scrollTop: スクロール位置の考慮
    // 水平位置はお好みで
    const endPoint =
      startTop !== endTop ? offsetLeft + (offsetWidth - parseInt(paddingRight, 10)) : endLeft
    // x: 選択開始位置 + 始点と終点の半分の値
    const newLeft = startLeft + ((endPoint - startLeft) / 2)
    // マーカーの位置を設定する
    // フォントサイズの2倍くらいの高さを引くといい感じの所になる
    input.__marker.setAttribute('style', `left: ${newLeft - scrollLeft}px; top: ${startTop - scrollTop - fontSizeNumber*2 }px`)
  }

  /**
   * マーカーを作成する
   * @param {*} content マーカーのテキスト
   * @returns
   */
  const createMarker = (content) => {
    const marker = document.createElement('div')
    marker.classList.add('input-marker', 'input-marker--visible')
    marker.textContent = content
    input.__marker = marker;

    // documentに挿入
    document.body.appendChild(marker)
    document.addEventListener('click', removeMarkerIfClickOutPosition)
    setMarkerPosition()

    return marker
  }

  const removeMarker = () => {
    document.body.removeChild(input.__marker)
    document.removeEventListener('click', removeMarkerIfClickOutPosition)
    input.__marker = null;
  }


  // 条件によってマーカーを非表示にする
  const removeMarkerIfClickOutPosition = evt => {
    // 入力系タグの外をクリックした
    if (e !== evt &&  e.target !== evt.target) {
      toggleMarker(false);
    }
    // mousedown時とmouseup時の座標が一緒
    if (mouseDownCoords.x === e.clientX && mouseDownCoords.y === e.clientY) {
      toggleMarker(false);
    }
  }
  // マーカーの表示を切り替える関数を作成する
  const toggleMarker = (flag) => {
    // 一旦マーカーは削除する
    if (input.__marker) {
      removeMarker()
    }

    if (flag) {
      createMarker("selection!")
    }
  }

  // 選択範囲なし -> マーカーを非表示にする
  if (selectionStart === selectionEnd) {
    toggleMarker(false)
    return
  }
  // マーカーが表示されておらず、選択範囲がある場合はマーカーを表示する
  if (selectionStart !== selectionEnd) {
    toggleMarker(true)
  }
}

const getSelectionInputArea = document.querySelector('#input-marker');
getSelectionInputArea.addEventListener('mousedown', setMouseDownCoords)
getSelectionInputArea.addEventListener('mouseup', setMarkerNearSelectionArea)
const getSelectionTextArea = document.querySelector('#textarea-marker');
getSelectionTextArea.addEventListener('mousedown', setMouseDownCoords)
getSelectionTextArea.addEventListener('mouseup', setMarkerNearSelectionArea)

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("input-marker").value="LFc739EWpCMCAyfuoIbA6YjhRM6xwrMJAoUCAQbHEka5Nb6rhC9ZjqTq6MO82yVdKjajbApViSGAa5wotRcF2movvsqzfcCAdy5JzTE8VGzHCyIT9wDIhem12YiV7gsCWiQXygXrzwJ2TzGCbw0yoWRC1Z6qjXPFsv5sqG3JVCICtgb6Mkx332CTdGwdhsvxazcC5F0ZYdohynt8bUFTDld7VWCsMluDRrV5hEZ9Pq5vPfQsJYqrbW9mmEqJIHD9NvZCjMuMUW1faIJfdfgtW4cRBUdHRVQCEy3DUwjBqGbnmvmUF5lkyoRCgfD36jaGDo2WgwxfGa7f3CxLbshGOKnNpwYIN6SdrnFbbRNi5GOaaeFGDQ6aNXX2v4dnt3Uey2XbRCjE7hnz1JDywwQFU4p3KPA6OluJVVj1STV7IdfcjO1waQXcPxWNaE2ZHK47MuuNNgfgvlCvAJBnT5MZchW4mwSC07QdFj6C7awrns0CRV6Go6WOI8GGsGmYyPo3BM0LOndFR9CcJPi6D9IZD6xYBoT4A2iJYOjdY4K4w1N7LTvyeKeGxFTxepYGOQqpWEFt0yCzX5OpG1SSHYFDeSKfVQbNEqIEZiYMV2LXIFAV9PwU6PiMuj5SAlssyZCFyC9WqlwoDJot3GY3qrjpC75fuG1Z0bZ2Apgd4LZIHwsDghlSWvUlUmPHj5YFCUlkMKadtAMjJYwVt5CZtyV3h1HkkY6gTufhfVRqk9YezvECxAzUSLJsNTIICs3M46t1VJ2DgJXr24LCX6Okd4dhBLzeOZQDa25R03PshRkjGDjzr6KdLSz1lqF7crz08StQMdiq8OwbvVl305JMDURzB9fDTAqQYYAknSHh6rZprLML88212E9AoXj7LpgUWC95SlzNUuxCDHRC2Hq6R8YWob1pUINUC0LOOobNCQSDSuYdw2JH5IW6HkDNTDPv4hSh3ijsU6drz7TSat1ueU7jDkxZslBd1FzriLXP4Lhj"
document.getElementById("textarea-marker").value="LFc739EWpCMCAyfuoIbA6YjhRM6xwrMJAoUCAQbHEka5Nb6rhC9ZjqTq6MO82yVdKjajbApViSGAa5wotRcF2movvsqzfcCAdy5JzTE8VGzHCyIT9wDIhem12YiV7gsCWiQXygXrzwJ2TzGCbw0yoWRC1Z6qjXPFsv5sqG3JVCICtgb6Mkx332CTdGwdhsvxazcC5F0ZYdohynt8bUFTDld7VWCsMluDRrV5hEZ9Pq5vPfQsJYqrbW9mmEqJIHD9NvZCjMuMUW1faIJfdfgtW4cRBUdHRVQCEy3DUwjBqGbnmvmUF5lkyoRCgfD36jaGDo2WgwxfGa7f3CxLbshGOKnNpwYIN6SdrnFbbRNi5GOaaeFGDQ6aNXX2v4dnt3Uey2XbRCjE7hnz1JDywwQFU4p3KPA6OluJVVj1STV7IdfcjO1waQXcPxWNaE2ZHK47MuuNNgfgvlCvAJBnT5MZchW4mwSC07QdFj6C7awrns0CRV6Go6WOI8GGsGmYyPo3BM0LOndFR9CcJPi6D9IZD6xYBoT4A2iJYOjdY4K4w1N7LTvyeKeGxFTxepYGOQqpWEFt0yCzX5OpG1SSHYFDeSKfVQbNEqIEZiYMV2LXIFAV9PwU6PiMuj5SAlssyZCFyC9WqlwoDJot3GY3qrjpC75fuG1Z0bZ2Apgd4LZIHwsDghlSWvUlUmPHj5YFCUlkMKadtAMjJYwVt5CZtyV3h1HkkY6gTufhfVRqk9YezvECxAzUSLJsNTIICs3M46t1VJ2DgJXr24LCX6Okd4dhBLzeOZQDa25R03PshRkjGDjzr6KdLSz1lqF7crz08StQMdiq8OwbvVl305JMDURzB9fDTAqQYYAknSHh6rZprLML88212E9AoXj7LpgUWC95SlzNUuxCDHRC2Hq6R8YWob1pUINUC0LOOobNCQSDSuYdw2JH5IW6HkDNTDPv4hSh3ijsU6drz7TSat1ueU7jDkxZslBd1FzriLXP4Lhj";
})