import React, { Component } from 'react';
import axios from 'axios';
import ItemViewDetailsV from './ItemViewDetailsV';
import ItemViewHistoryV from './ItemViewHistoryV';
import { Redirect } from 'react-router-dom';
/*
                <div>
                { this.state && this.state.itemInfo && <h1> {this.state.itemInfo.history.map((item, i) => {
                  return <div>{item.hskey}</div>
                  })}
               </h1>

                }
*/
class ViewItemC extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
      console.log(this.props.match.params.itemId);
      axios.get("http://localhost:4000/api/item/" + this.props.match.params.itemId)
        .then(res => {
          this.setState({
            itemInfo: res.data.item,
            itemHistory: res.data.history
          })
        })
        .catch(err => {
          this.setState({
            error: err.response.data.Error
          })
        })
    }

    onSubmitView = (id, versionId, event) => {
      event.preventDefault();
      let url = 'http://localhost:4000/api/item/' + id + '/download/' + versionId
      const body = {
        "bucketDir":this.state.itemInfo["mttype"],
        "filename":this.state.itemInfo["mtname"]
      }
      //window.open(url, "_blank");
      axios.post(url, body)
        .then(res => {
          //console.log(res);
          window.open(res.data.signedRequest, "_blank");
        })
    }

    render() {
        let deadlinestring;
        let createstring;
        let editedstring;
        if(this.state && this.state.itemInfo) {
          deadlinestring = new Date(this.state.itemInfo.mtdeadline).toUTCString();
          createstring = new Date(this.state.itemInfo.mtcreatedate).toUTCString();
          editedstring = new Date(this.state.itemInfo.mtlastedited).toUTCString();

        }
        if(this.state && this.state.error) {
          return (
            <Redirect
              to={{
                pathname: "/error",
                state: { error: this.state.error}
              }}
            />
          )
        }
        return (
            <div className="row row-eq-height">
              <div className="col-md-12">
                <h1>Item Details</h1>
              </div>
              <div className="col-md-9" style={{backgroundColor:"#f8f9fa"}}>
                {
                  this.state &&
                  this.state.itemInfo &&
                  <ItemViewDetailsV item={this.state.itemInfo} deadline={deadlinestring} created={createstring} edited={editedstring}/>
                }
              </div>
              <div className="col-md-3" style={{backgroundColor:"#f8f9fa"}}>
                {
                  this.state &&
                  this.state.itemHistory &&
                  <ItemViewHistoryV history={this.state.itemHistory} buttonClick={this.onSubmitView}/>
                }
              </div>
            </div>
        );
    }
}


export default ViewItemC