Notes

/**
*
* ClosingUnit
*
*/

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
//import { makeStyles } from '@material-ui/core/styles';
import { useInjectSaga } from 'utils/injectSaga';
import { useInjectReducer } from 'utils/injectReducer';
import { defaultStyle } from './styles';
import makeSelectClosingUnit from './selectors';
import reducer from './reducer';
import saga from './saga';
import messages from './messages';
import UserList from '../../components/UserList';
import ProjectTemplate from '../../components/ProjectTemplate';
import ClosingUnitDataGrid from './ClosingUnitDataGrid';
//import { Typography } from '@material-ui/core';
import { Button, Grid, Input, TextField, makeStyles, Typography} from '@material-ui/core';
// import TextArea from '@highradius/g4_ui_components/lib/components/atoms/TextArea'
// import Input from '@highradius/g4_ui_components/lib/components/atoms/Input'
// import Button from '@highradius/g4_ui_components/lib/components/atoms/Button'


import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import Draggable from 'react-draggable';
const useStyles = makeStyles(defaultStyle);

export function ClosingUnit() {
useInjectReducer({ key: 'closingUnit', reducer });
useInjectSaga({ key: 'closingUnit', saga });

const [open, setOpen] = React.useState(false);
const styler = useStyles();


const handleClickOpen = () => {
setOpen(true);
};

const handleClose = () => {
setOpen(false);
};

return (
<div style={{backgroundColor:"white"}}>
<Helmet>
<title>ClosingUnit</title>
<meta name="description" content="Description of ClosingUnit" />
</Helmet>
<div>
<Typography color="primary" style={{marginLeft:"10rem"}}>
<h3>Closing Units Created For This Account</h3>
</Typography>
<Button style={{marginLeft:"15rem"}} color="primary" onClick={handleClickOpen}>
Add Closing Unit
</Button>

<Dialog
fullScreen
open={open}
onClose={handleClose}
// PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
<DialogTitle>
<Typography color="primary" >
<h1>ADD Closing Unit</h1>
</Typography>

</DialogTitle>
<DialogContent>
{/* <DialogContentText>
To subscribe to this website, please enter your email address here. We will send updates
occasionally.
</DialogContentText> */}
<Grid container spacing={5}>
<Grid item xs={4}>
Closing Unit Name
</Grid>
<Grid item xs={8}>
<TextField
required
variant="outlined"
defaultValue="Success"
className={styler.root}></TextField>
{/* <TextField id="outlined-basic" label="Outlined" variant="outlined" /> */}
</Grid>
<Grid item xs={4}>
Closing Unit Description
</Grid>
<Grid item xs={8}>
<textarea rows={5} multiline="true" ></textarea>
{/* <TextField id="outlined-basic" multiline label="Outlined" variant="outlined" /> */}
</Grid>
</Grid>
<UserList />
<ProjectTemplate />
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary">
Save
</Button>
</DialogActions>
</Dialog>
</div>
<div>
<ClosingUnitDataGrid />
</div>
<div style={{backgroundColor:"white", margin:"5rem 0rem 0rem 65rem"}}>
{/* <Button color="secondaryLight" title="Cancel" />&nbsp;&nbsp;&nbsp;&nbsp;
<Button title="Save" /> */}
{/* <Button color="secondaryLight">Cancel</Button> */}
<Button>Activate</Button>
</div>
</div>

);
}

ClosingUnit.propTypes = {
dispatch: PropTypes.func.isRequired,
};

const mapStateToProps = createStructuredSelector({
closingUnit: makeSelectClosingUnit(),
});

function mapDispatchToProps(dispatch) {
return {
dispatch,
};
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(withConnect, memo)(ClosingUnit);