import React from 'react'
import PropTypes from 'prop-types'
// Import React-JSS
import injectSheet from 'react-jss'

const styles = {
	centerText: {
		textAlign:"center"
	},
	lightWeight: {
		fontWeight:"lighter"
	},
	metaDataWrapper: {
		margin: "2em"
	},
	contentWrapper: {
		margin: "1em"
	},
	card: {
		backgroundColor:"white",
		margin:"1em",
		maxWidth:"75%",
		boxShadow: "2px 2px 10px black",
		padding:"1.5em"
	},
	scrollable: {
		overflow:"scroll",
		maxHeight:"100vh"
	}
}

/*

							*/
const ItemViewHistoryV = (props) => {
	return (
		<React.Fragment>
		<div className="col-md-12">
			<h2>Item History</h2>
		</div>
		<div className={`row ${props.classes.scrollable}`}>

			{
				props.history.length == 0 &&
				<div className="col-md-12">
					<h2>No History Available.</h2>
				</div>
			}
			{
				props.history.length >= 1 &&
				props.history.map((item, i) => {
					let timestamp = new Date(item["hstimestamp"]).toUTCString();
					return (
						<div className={`col-md-12 ${props.classes.card}`}>
							<div><span style={{fontWeight:"bold"}}>Last Edited by</span> {item["ulastuser"]}</div>
							<div><span style={{fontWeight:"bold"}}>on Date</span> {timestamp}</div>
	      			<button onClick={(e) => props.buttonClick(item["hsmatter"], item["hsversion"], e)} type='submit' className={`btn btn-primary`}>Download</button>
						</div>
					)
				})
			}
		</div>
		</React.Fragment>
	);
}

export default injectSheet(styles)(ItemViewHistoryV);
