import React from "react";
import ReactMarkdown from "react-markdown";
import lbry from "lbry.js";
import FileActions from "component/fileActions";
import Link from "component/link";
import DateTime from "component/dateTime";

class FileDetails extends React.PureComponent {
  render() {
    const { claim, contentType, metadata, uri } = this.props;

    if (!claim || !metadata) {
      return (
        <div className="card__content">
          <span className="empty">{__("Empty claim or metadata info.")}</span>
        </div>
      );
    }

    const { description, language, license } = metadata;
    const { height } = claim;
    const mediaType = lbry.getMediaType(contentType);

    return (
      <div>
        <FileActions uri={uri} />
        <div className="card__content card__subtext card__subtext--allow-newlines">
          <ReactMarkdown
            source={description || ""}
            escapeHtml={true}
            disallowedTypes={["Heading", "HtmlInline", "HtmlBlock"]}
          />
        </div>
        <div className="card__content">
          <table className="table-standard table-stretch">
            <tbody>
              <tr>
                <td>{__("Published on")}</td>
                <td><DateTime block={height} /></td>
              </tr>
              <tr>
                <td>{__("Content-Type")}</td><td>{mediaType}</td>
              </tr>
              <tr>
                <td>{__("Language")}</td><td>{language}</td>
              </tr>
              <tr>
                <td>{__("License")}</td><td>{license}</td>
              </tr>
            </tbody>
          </table>
          <p>
            <Link
              href={`https://lbry.io/dmca?claim_id=${claim.claim_id}`}
              label={__("report")}
            />
          </p>
        </div>
      </div>
    );
  }
}

export default FileDetails;