export function createRipple(event: MouseEvent | TouchEvent, inCenter: boolean = false) {
  //debugger
  const el = <HTMLElement> event.currentTarget;
  let buttonWidth = el.offsetWidth;
  let buttonHeight =  el.offsetHeight;

  let offsetX: number;
  let offsetY: number;
  let clientX: number;
  let clientY: number;

  if (event instanceof MouseEvent) {
    offsetX = event.offsetX;
    offsetY = event.offsetY;
    clientX = event.clientX;
    clientY = event.clientY;
  } else {
    // TODO: calculate offset for touch events
    offsetX = event.touches[0].clientX;
    offsetY = event.touches[0].clientY;
    clientX = event.touches[0].clientX;
    clientY = event.touches[0].clientY;
  }

  if (event.currentTarget !== event.target) {
    let bounds = el?.getBoundingClientRect();
    offsetY = clientX - (bounds?.left|| 0);
    offsetY = clientY - (bounds?.top || 0);
  }

  // remove any existing ripple element
  let oldSpan = <HTMLElement> document.getElementsByClassName('ripple')[0];
  if (oldSpan) oldSpan.remove();

  let span = document.createElement('span');
  span.classList.add('ripple');

  el.prepend(span);

  // rounding the element
  if(buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
  } else {
    buttonWidth = buttonHeight;
  }

  span.style.top =  inCenter ? '0px' : `${offsetY - (buttonHeight/2)}px`;
  span.style.left = inCenter ? '0px' : `${offsetX - (buttonWidth/2)}px`;
  span.style.width = `${buttonWidth}px`;
  span.style.height = `${buttonHeight}px`;
  span.classList.add('rippleEffect');
}