import React from "react";
import isHtml from "is-html";

class Cell extends React.Component {
  constructor(props) {
    super(props);
    this.renderValue = this.renderValue.bind(this);
  }

  renderValue(val) {
    if (val && typeof val === "string") {
      if (isHtml(val)) {
        return (
          <div
            className="overflow-ellipsis overflow-ellipsis-user-select"
            dangerouslySetInnerHTML={{ __html: val }}
          ></div>
        );
      } else {
        if (val.indexOf("http") !== -1) {
          return (
            <div className="overflow-ellipsis overflow-ellipsis-user-select" title={val}>
              <a href={val}>{val}</a>
            </div>
          );
        } else {
          return (
            <div className="overflow-ellipsis overflow-ellipsis-user-select" title={val}>
              {val}
            </div>
          );
        }
      }
    } else {
      return (
        <div className="overflow-ellipsis overflow-ellipsis-user-select" title={val}>
          {val}
        </div>
      );
    }
  }

  render() {
    const { value } = this.props;
    return this.renderValue(value);
  }
}

export default Cell;
