import React from 'react';

import { OverlayTrigger, Tooltip } from 'react-bootstrap';

const propTypes = {
  column: React.PropTypes.object.isRequired,
};

const iconMap = {
  pk: 'fa-key',
  fk: 'fa-link',
  index: 'fa-bookmark',
};
const tooltipTitleMap = {
  pk: 'Primary Key',
  fk: 'Foreign Key',
  index: 'Index',
};

class ColumnElement extends React.PureComponent {
  render() {
    const col = this.props.column;
    let name = col.name;
    let icons;
    if (col.keys && col.keys.length > 0) {
      name = <strong>{col.name}</strong>;
      icons = col.keys.map((key, i) => (
        <span key={i} className="ColumnElement">
          <OverlayTrigger
            placement="right"
            overlay={
              <Tooltip id="idx-json" bsSize="lg">
                <strong>{tooltipTitleMap[key.type]}</strong>
                <hr />
                <pre className="text-small">
                  {JSON.stringify(key, null, '  ')}
                </pre>
              </Tooltip>
              }
          >
            <i className={`fa text-muted m-l-2 ${iconMap[key.type]}`} />
          </OverlayTrigger>
        </span>
      ));
    }
    return (
      <div className="clearfix table-column">
        <div className="pull-left m-l-10 col-name">
          {name}{icons}
        </div>
        <div className="pull-right text-muted">
          <small> {col.type}</small>
        </div>
      </div>);
  }
}
ColumnElement.propTypes = propTypes;

export default ColumnElement;