import React from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import { Icon, Badge } from '@enos/dpl';
import { commonCategory } from './IconConfig';

export default class CopyableIcon extends React.Component {
  state = {
    justCopied: false,
  };
  onCopied = () => {
    this.setState({ justCopied: true }, () => {
      setTimeout(() => {
        this.setState({ justCopied: false });
      }, 2000);
    });
  }
  render() {
    const { type, isNew, category } = this.props;
    const text = category === commonCategory ? `<Icon type="${type}" />` : `<i className="dplicon ${type}" />`;
    return (
      <CopyToClipboard text={text} onCopy={this.onCopied}>
        <li className={this.state.justCopied ? 'copied' : ''}>
          <div className={'dplicon-wrapper'}>
            {category === commonCategory ? <Icon type={type} /> : <i className={`dplicon ${type}`} />}
            <span className="dplicon-class">
            <Badge dot={isNew}>
              {type}
            </Badge>
          </span>
          </div>
        </li>
      </CopyToClipboard>
    );
  }
}