import { traverse } from '../../../Utils/DOM';

const getTextContentWithoutChildren = (element: HTMLElement): string => {
  const callback = (a, b) => {
    return a + (b.nodeType === Node.TEXT_NODE ? b.textContent : '');
  };

  return [].reduce.call(element.childNodes, callback, '') + '';
};

const hasElementTextContent = (element: HTMLElement): boolean => {
  return !!getTextContentWithoutChildren(element).replace(/ /g, '').length;
};

const storeFontParams = (params: any, element: HTMLElement) => {
  const colorIdentifier = element.dataset.color;
  const style = element.style;
  params.fontSize = style.fontSize || params.fontSize;
  params.fontFamily = style.fontFamily || params.fontFamily;
  params.fontWeight = style.fontWeight || params.fontWeight;
  params.fontStyle = style.fontStyle || params.fontStyle;
  params.textAlign = style.textAlign || params.textAlign;
  if (colorIdentifier && hasElementTextContent(element)) {
    params.colors.push({
      identifier: colorIdentifier,
      value: style.color,
    });
  }
};

// set the initial values that are not there automatically
const initialParamValues = {
  fontWeight: 'normal',
  fontStyle: 'normal',
  textAlign: 'left',
};

export const collectStyleParams = (content: string): any => {
  const div = document.createElement('div');
  div.innerHTML = content;
  const params = {
    colors: [],
    ...initialParamValues,
  };
  traverse(div, item => {
    if (item.nodeType === Node.ELEMENT_NODE) {
      storeFontParams(params, item);
    }
  });
  return params;
};