import React from 'react';
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 EditableV = (props) => {
	return (
		<form onSubmit={props.onSubmit}>
			<div className="row">
				<div className="col-md-12">
					<h2>              <label>Matter Name</label>
              <input type='text' className='form-control' placeholder={props.title} value={props.title} onChange={props.titleChange} /></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}`}>
					status: editing
				</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><label>Assignee</label>
              <input type='text' className='form-control' placeholder={props.assignee} value={props.assignee} onChange={props.assigneeChange} />
            </h5>
						</div>
						<div className={`col-md-4 ${props.classes.centerText}`}>
							<h5><label>Priority</label>
              <input type='text' className='form-control' placeholder={props.priority} value={props.priority} onChange={props.priorityChange} />
            </h5>
						</div>
						<div className="col-md-3">
							<h5>Created <span className={`${props.classes.lightWeight}`}>{props.item["mtcreatedate"]}</span></h5>
						</div>
						<div className="col-md-3">
							<h5>Edited <span className={`${props.classes.lightWeight}`}>{props.item["mtlastedited"]}</span></h5>
						</div>
						<div className="col-md-3">
							<h5><label>Deadline</label>
              <input type='text' className='form-control' placeholder={props.deadline} value={props.deadline} onChange={props.deadlineChange} />
            </h5>
						</div>
						<div className="col-md-3">
							<h5>Created <span className={`${props.classes.lightWeight}`}>{props.item["mtcreatedate"]}</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>
									<textarea type="text" onChange={(e) => props.generic(i, e)} value={props.filledSections[i] || ''} style={{width:"100%"}} rows="5"></textarea>
								</React.Fragment>
							)
						})
					}
				</div>
			</div>
        <button type='submit' className={`btn btn-primary ${props.classes.buttonCSS}`}>Submit Changes</button>
			</form>
	)
}

export default injectSheet(styles)(EditableV)
