import React from 'react';
import PropTypes from 'prop-types';
import makeBlockie from 'ethereum-blockies-base64';
import Button from './Button';
import { invert } from '../../lib/state';

const isValidAddress = address => /^0x[0-9a-fA-F]{40}$/.test(address);

class ShowBlockie extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      open: false,
    };

    this.toggle = this.toggle.bind(this);
    // this.close = this.close.bind(this)
  }

  toggle = () => this.setState(invert('open', this.state));

  render() {
    const { props, state } = this;

    const display = state.open ? '' : 'super-hidden';

    const isValid = isValidAddress(props.address);

    return (
      <div className={`flex flex-column items-start ${props.className}`}>
        <Button
          onClick={this.toggle}
          disabled={!isValid}
          prop-type="link"
          prop-size="sm">
          {state.open ? 'Hide Blockie' : 'Display Blockie'}
        </Button>
        {!isValid ? (
          <div />
        ) : (
          <img
            className={`${display} mt-2`}
            alt={props.address}
            src={makeBlockie(props.address)}
            style={{
              width: props.size,
              height: props.size,
            }}
          />
        )}
      </div>
    );
  }
}

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

ShowBlockie.defaultProps = {
  className: '',
  style: {},
  size: 64,
  address: '',
};

export default ShowBlockie;