const getAttrib = (image: HTMLElement, name: string): string => {
  if (image.hasAttribute(name)) {
    return image.getAttribute(name);
  } else {
    return '';
  }
};

const getAbsoluteClientRect = (root: HTMLElement, element: HTMLElement, before: boolean): ClientRect => {
  const clientRect = GeomClientRect.collapse(element.getBoundingClientRect(), before);
  let docElm, scrollX, scrollY, margin, rootRect;

  if (root.tagName === 'BODY') {
    docElm = root.ownerDocument.documentElement;
    scrollX = root.scrollLeft || docElm.scrollLeft;
    scrollY = root.scrollTop || docElm.scrollTop;
  } else {
    rootRect = root.getBoundingClientRect();
    scrollX = root.scrollLeft - rootRect.left;
    scrollY = root.scrollTop - rootRect.top;
  }

  clientRect.left += scrollX;
  clientRect.right += scrollX;
  clientRect.top += scrollY;
  clientRect.bottom += scrollY;
  clientRect.width = 1;

  margin = element.offsetWidth - element.clientWidth;

  if (margin > 0) {
    if (before) {
      margin *= -1;
    }

    clientRect.left += margin;
    clientRect.right += margin;
  }

  return clientRect;
};

const setSelected = function (state: boolean, elm: HTMLElement) {
  if (state) {
    elm.setAttribute('data-mce-selected', 'inline-boundary');
  } else {
    elm.removeAttribute('data-mce-selected');
  }
};

const normalizeStyle = (image: HTMLElement, normalizeCss: CssNormalizer) => {
  const attrValue = image.getAttribute('style');
  const value = normalizeCss(attrValue !== null ? attrValue : '');

  if (value.length > 0) {
    image.setAttribute('style', value);
    image.setAttribute('data-mce-style', value);
  } else {
    image.removeAttribute('style');
  }
};

 Chain.op(function (elm: Element) {
   const element: HTMLElement = elm.dom();
   // NOTE we can't fake a paste event here.
   let event;
   if (Type.isFunction(Event)) {
     event = new Event(name, {
       bubbles: true,
       cancelable: true
     });
   } else { // support IE
     event = document.createEvent('Event');
     event.initEvent(name, true, true);
   }
   element.dispatchEvent(event);
 }),

 const showBlockCaretContainer = function (blockCaretContainer: HTMLElement) {
   if (blockCaretContainer.hasAttribute('data-mce-caret')) {
     CaretContainer.showCaretContainerBlock(blockCaretContainer);
     setRange(getRange()); // Removes control rect on IE
     editor.selection.scrollIntoView(blockCaretContainer[0]);
   }
 };

const showBlockCaretContainer = function (editor: Editor, blockCaretContainer: HTMLElement) {
  if (blockCaretContainer.hasAttribute('data-mce-caret')) {
    CaretContainer.showCaretContainerBlock(blockCaretContainer);
    removeIeControlRect(editor);
    editor.selection.scrollIntoView(blockCaretContainer);
  }
};

const getElmIndex = function (elm: HTMLElement) {
  const value = elm.getAttribute('data-mce-index');

  if (typeof value === 'number') {
    return '' + value;
  }

  return value;
};

const measureElement = function (elm: HTMLElement) {
  const clientRect = elm.getBoundingClientRect();

  return toAbsolute({
    x: clientRect.left,
    y: clientRect.top,
    w: Math.max(elm.clientWidth, elm.offsetWidth),
    h: Math.max(elm.clientHeight, elm.offsetHeight)
  });
};

const insertOrUpdateImage = (editor: Editor, data: ImageData) => {
  const image = getSelectedImage(editor);
  if (image) {
    if (data.src) {
      writeImageDataToSelection(editor, data);
    } else {
      deleteImage(editor, image);
    }
  } else if (data.src) {
    insertImageAtCaret(editor, data);
  }
};