import React from 'react'
import PropTypes from 'prop-types'
// Import React-JSS
import injectSheet from 'react-jss'
import { Link } from 'react-router-dom'

const styles = {
	centerText: {
		textAlign:"center"
	},
	lightWeight: {
		fontWeight:"lighter"
	},
	metaDataWrapper: {
		margin: "2em"
	},
	contentWrapper: {
		margin: "1em"
	}
}

const ItemViewDetailsV = (props) => {
	return (
		<div className="row">
			<div className="col-md-12">
				<h2>{props.item["mttitle"]}</h2>
			</div>
			<div className="col-md-4">
				<h4>Contract # <span className={`${props.classes.lightWeight}`}>{props.item["mtcontract"]}</span></h4>
			</div>
			<div className="col-md-4">
				<h4>File Name <span className={`${props.classes.lightWeight}`}>{props.item["mtname"]}</span></h4>
			</div>
			<div className={`col-md-4 ${props.classes.centerText}`}>
	      <button className={`btn btn-primary ${props.classes.buttonCSS}`}><Link style={{textDecoration:"none", color:"white"}} to={"/editItem/"+props.item["mtkey"]}>Edit</Link></button>
			</div>
			<div className={`col-md-12`}>
				<div className={`row ${props.classes.metaDataWrapper}`}>
					<div className="col-md-4">
						<h5>Type <span className={`${props.classes.lightWeight}`}>{props.item["mttype"].charAt(0).toUpperCase() + props.item["mttype"].slice(1)} - {props.item["mtsubtype"]}</span></h5>
					</div>
					<div className="col-md-2">
						<h5>Creator <span className={`${props.classes.lightWeight}`}>{props.item["udisplay"]}</span></h5>
					</div>
					<div className="col-md-2">
						<h5>Assingee <span className={`${props.classes.lightWeight}`}>{props.item["uassignee"]}</span></h5>
					</div>
					<div className={`col-md-4 ${props.classes.centerText}`}>
						<h5>Priority <span className={`${props.classes.lightWeight}`}>{props.item["mtpriority"]}</span></h5>
					</div>
					<div className="col-md-4">
						<h5>Created <span className={`${props.classes.lightWeight}`}>{props.created}</span></h5>
					</div>
					<div className="col-md-4">
						<h5>Edited <span className={`${props.classes.lightWeight}`}>{props.edited}</span></h5>
					</div>
					<div className="col-md-4">
						<h5>Deadline <span className={`${props.classes.lightWeight}`}>{props.deadline}</span></h5>
					</div>
				</div>
			</div>
			<div className={`col-md-12 ${props.classes.contentWrapper}`}>
				{
					Object.keys(props.item["mtsections"]).map((key, i) => {
						return (
							<React.Fragment>
								<h1> {key} </h1>
								<p> {props.item["mtsections"][key]} </p>
							</React.Fragment>
						)
					})
				}
			</div>
		</div>
	);
}

export default injectSheet(styles)(ItemViewDetailsV);
