import { Meteor } from 'meteor/meteor';
import React, { useState } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import _ from 'lodash';
import SimpleTable from "/imports/ui/util/SimpleTable";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import {AssetTypes} from "/imports/api/asset-types";

const cssFieldColumnContainer = {
	display: 'flex',
	flexDirection: 'column',
	backgroundColor: '#DDD',
	padding: '0.5rem',
	border: '1px solid #999',
	borderRadius: '0.2rem'
}
const cssEditorField = {
	marginTop: '0.6rem',
}
const cssGridFieldContainer = {
	display: 'grid',
	gridTemplateColumns: "1fr 1fr",
	columnGap: '1rem',
	rowGap: '0.4rem',
	marginBottom: '1.5rem'
}
const cssButtonContainer = {
	display: 'flex',
	gap: '1rem',
	justifyContent: 'flex-end'
}

const AssetTypeEditor = ({value, close}) => {
	const [year, setYear] = useState(value.year || "")
	const [name, setName] = useState(value.name || "")
	const [description, setDescription] = useState(value.description || "")

	const applyChanges = () => {
		close()
		//TODO Should invert this and only close if there was success on the server.
		if(value._id)
			Meteor.call("assetType.update", value._id, name, description, year);
		else
			Meteor.call("assetType.add", name, description, year);
	}
	const rejectChanges = () => {
		close()
	}
	const change = (e) => {
		console.log(e);
		
		setYear(e.target.value);
	}

	return (
		<div style={cssFieldColumnContainer}>
			<h1>Asset Type Editor</h1>
			<div style={cssGridFieldContainer}>
				<TextField variant="standard" style={cssEditorField} label="Year" value={year} onChange={(e) => change}/>
				<TextField variant="standard" style={cssEditorField} label="Name" value={name} onChange={(e) => {setName(e.target.value)}}/>
				<TextField variant="outlined" style={{gridColumn: '1 / span 2',...cssEditorField}} multiline rows={4} label="Description" value={description} onChange={(e) => {setDescription(e.target.value)}}/>
			</div>
			<div style={cssButtonContainer}>
				<Button variant="contained" className="button accept-button" onClick={applyChanges}>Accept</Button>
				<Button variant="outlined" className="button reject-button" onClick={rejectChanges}>Reject</Button>
			</div>
		</div>
	)
}

export default () => {
	Meteor.subscribe('assetTypes');

	const {assetTypes} = useTracker(() => {
		let assetTypes = AssetTypes.find().fetch();

		return {assetTypes}
	});

	const columns = [
		{
			name: "Year",
			value: (row) => row.year,
		},
		{
			name: "Name",
			value: (row) => row.name,
		},
		{
			name: "Description",
			value: (row) => row.description,
		},
	]

	const options = {
		key: (row) => row._id,
		editor: (row, close) => {return (<AssetTypeEditor value={row} close={close}/>)},
		add: true,
		maxHeight: '40rem',
		keyHandler: (e, selected) => {
			if(selected && selected._id && e.key === "Delete") {
				Meteor.call("assetType.remove", selected._id);
			}
		}
	}

	return (
		<SimpleTable rows={assetTypes} columns={columns} options={options}/>
	)
}