import React from 'react';
import PropTypes from 'prop-types';
import makeBlockie from 'ethereum-blockies-base64';

const ValidatedBlockie = ({
  className,
  children,
  style,
  color,
  address,
  size,
  validator,
  displayPass,
  displayFailure,
  focussed,
  beenFocussed,
}) => {
  const colorStyle = styleSelector(displayPass, displayFailure, focussed);

  return (
    <div className={`${className}`} style={style}>
      {displayPass ? (
        <img
          alt={address}
          src={makeBlockie(address)}
          style={{
            width: size,
            height: size,
          }}
        />
      ) : (
        <div
          className={''}
          style={{
            backgroundColor: colorStyle[1],
            width: size,
            height: size,
          }}
        />
      )}
      {children}
    </div>
  );
};

const styleSelector = (pass, fail, focus) => {
  if (fail === true) return ['#FFFFFF', '#F8C134'];
  if (pass === true) return ['#FFFFFF', '#2AA779'];
  if (focus === true) return ['#FFFFFF', '#4330FC'];
  return ['#FFFFFF', '#7F7F7F'];
};

ValidatedBlockie.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  style: PropTypes.object,
};

ValidatedBlockie.defaultProps = {
  className: '',
  style: {},
};

export default ValidatedBlockie;