import pc1 from '../../../lib/ui/ProductClasses/svg/1.svg';

// todo: webpack imports it as b64, better just load it as string
function b64DecodeUnicode(str) {
  return decodeURIComponent(Array.prototype.map.call(window.atob(str), function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

const pc1String = b64DecodeUnicode(pc1.split(',')[1]);

function createSElement(s) {
  const container = document.createElement('div');
  container.innerHTML = s;
  return container.children[0];
}

// store all svgs as node elements, hmm
const cache = {
  productClass1: createSElement(pc1String)
};

function onProps(callerProps, props, tagName, name, value, index) {
  switch (name) {
    case 'fill':
      props[name] = callerProps.color || value;
      break;
    default:
      props[name] = value;
  }
  props.key = props.key || `k-${tagName}-${index || 0}`;
  // todo: add other cases like style, className, onClick on tagName svg
  return props;
}

function buildS(el, callerProps, index) {
  let props = {};
  for (let att, i = 0, atts = el.attributes, n = atts.length; i < n; i++) {
    att = atts[i];
    props = onProps(callerProps, props, el.tagName, att.nodeName, att.nodeValue, index);
  }
  if (el.children.length > 0) {
    return React.createElement(el.tagName, props, _.map(el.children, (e, i) => buildS(e, callerProps, i)));
  } else {
    return React.createElement(el.tagName, props);
  }
}

const DynamicSvg = React.createClass({
  render() {
    const {name, ...rest} = this.props;
    const s = cache[name];
    if (s) {
      // memoize buildS
      return buildS(s, rest);
    } else {
      return null;
    }
  }
});