import React from "react";
import { connect } from "redux-bundler-react";
import MarkdownIt from "markdown-it";
import xhr from "xhr";

class DatasetInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      __html: "<p>Loading</p>",
    };
    this.close = this.close.bind(this);
    this.renderAsync = this.renderAsync.bind(this);
    this.renderContent = this.renderContent.bind(this);
    this.renderMarkdown = this.renderMarkdown.bind(this);
    this.renderIframe = this.renderIframe.bind(this);
    this.renderImage = this.renderImage.bind(this);
    this.renderRawAsync = this.renderRawAsync.bind(this);
  }

  componentDidMount() {
    const { item } = this.props;
    if (item.info) {
      if (item.info.url) {
        if (item.info.iframe) {
          return this.renderIframe();
        } else if (item.info.img) {
          return this.renderImage();
        } else if (item.info.raw) {
          return this.renderRawAsync();
        } else {
          return this.renderAsync();
        }
      }
      if (item.info.content) {
        if (item.info.raw) {
          return this.renderRawContent();
        } else {
          return this.renderContent();
        }
      }
    }
  }

  close() {
    const { doModalClose } = this.props;
    doModalClose();
  }

  renderMarkdown(content) {
    const md = new MarkdownIt();
    this.setState({
      __html: md.render(content),
    });
  }

  renderContent() {
    const { item } = this.props;
    const { content } = item.info;
    return this.renderMarkdown(content);
  }

  renderRawContent() {
    const { item } = this.props;
    const { content } = item.info;
    return this.setState({ __html: content });
  }

  renderAsync() {
    const { item } = this.props;
    const { url } = item.info;
    xhr.get(url, (err, response, body) => {
      if (err) {
        this.renderMarkdown("Error Loading Content");
      } else {
        this.renderMarkdown(body);
      }
    });
  }

  renderRawAsync() {
    const { item } = this.props;
    const { url } = item.info;
    xhr.get(url, (err, response, body) => {
      if (err) {
        this.setState({ __html: "<p>Error Loading Content</p>" });
      } else {
        this.setState({ __html: body });
      }
    });
  }

  renderIframe() {
    const { item } = this.props;
    const { url } = item.info;
    this.setState({
      __html: `<iframe src="${url}" frameborder="0"></iframe>`,
    });
  }

  renderImage() {
    const { item } = this.props;
    const { url } = item.info;
    this.setState({
      __html: `<img src="${url}"></img>`,
    });
  }

  render() {
    const { theme, item } = this.props;
    return (
      <div>
        <div className={"cm-modal-header " + theme}>
          {item.displayName} Metadata
        </div>
        <div
          className="cm-modal-body thin-scrollbar"
          style={{
            height: window.innerHeight * 0.75,
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            overflow: "auto",
          }}
          dangerouslySetInnerHTML={this.state}
        ></div>
        <div className="cm-modal-footer">
          <button
            className={"cm-btn cm-btn-theme " + theme}
            onClick={this.close}
          >
            Close
          </button>
        </div>
      </div>
    );
  }
}

export default connect("selectTheme", "doModalClose", DatasetInfo);
