import React from "react";
import { FiCopy, FiDownload } from "react-icons/fi";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { BrowserRouter, Link } from "react-router-dom";

class PlayerCaption extends React.Component {
  constructor(props) {
    super(props);
    this.downloadVid = this.downloadVid.bind(this);
    this.onCopy = this.onCopy.bind(this);
    this.state = {
      copied: false,
      value: "default text"
    };
  }
  downloadVid() {
    this.props.dwn_url();
  }
  onCopy = () => {
    this.setState({ copied: true });
  };

  render() {
    return (
      <div className="caption">
        <p className="video-buttons">
          <CopyToClipboard text={this.props.copy()} onCopy={this.onCopy}>
            <button type="button" id={this.props.id}>
              <FiCopy size={30} />
            </button>
          </CopyToClipboard>
          {this.state.copied ? <span>Copied!</span> : null}
          <BrowserRouter>
            <Link
              to={this.props.dwn_url()}
              onClick={e => e.preventDefault()}
              download={this.props.dwn_url()}
            >
              <FiDownload size={30} />
            </Link>
          </BrowserRouter>
        </p>
      </div>
    );
  }
}

export default PlayerCaption;