import { AgGridReact } from 'ag-grid-react';
import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
import { ApolloClient, gql, InMemoryCache } from "@apollo/client"
import { Button, getTextFieldUtilityClass, Grid, Paper, Stack, styled } from '@mui/material';
import ContentList from './ContentList';
import FileDownloadCellRenderer from './FileDownloadCellRenderer';
import FileUploadHistoryList from './FileUploadHistoryList';
import MilestoneList from './MilestoneList';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import * as _ from 'underscore';
import moment from 'moment';
import { Color } from 'ag-grid-community';
const GET_FILEUPLOADS =
gql`
query($contentId:Int) {
fileUploads(where: {contentId:{eq:$contentId}}) {
contentId
fileType {
fileTypeName
}
content {
userInfo {
longName
}
}
version
originalName
fileName
dateCreated
}
}
`;
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
padding: theme.spacing(1),
textAlign: 'left',
}));
const client = new ApolloClient({
uri: process.env.REACT_APP_MAGIC_API,
cache: new InMemoryCache(),
});
const MAGIC_API_FILES_BASE_URL ="http://localhost:8081/Files/";
const SubmissionEditor = () => {
const gridRef = useRef(null); // Optional - for accessing Grid's API
const [rowData, setRowData] = useState([]); // Set rowData to Array of Objects, one Object per Row // mother content
const [fileUploadInfopPanelVisivility, SetFileUploadInfoPanelVisibility] = useState(false);
const [expanded, setExpanded] = React.useState<string | false>(false);
const [fileUploadData, setFileUploadData] = useState([]); //history and file uploads
const [selectedContentId, setSelectedContentId] = useState(0);
const [downloadURL, setDownloadURL] = useState(''); //history and file uploads
const [mostRecentFileUploadInfo, setMostRecentFileUploadInfo] = useState({} as any);
const handleChange =
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
setExpanded(isExpanded ? panel : false);
};
// Each Column Definition results in one Column.
const [columnDefs, setColumnDefs] = useState([
{ field: 'fileName', filter: true },
{ field: 'version', filter: true },
{ field: 'originalName' },
{
headerName: "Open",
field: "fileName",
editable: false,
cellRenderer: FileDownloadCellRenderer
}
]);
const onVisibilityChange = (contentId: number) => {
setSelectedContentId(contentId);
client
.query({
query: GET_FILEUPLOADS,
variables: { "contentId": contentId }
})
.then((response) => {
if (response && response.data && response.data.fileUploads && response.data.fileUploads.length) {
setFileUploadData(response.data.fileUploads);
let sortedList = _.sortBy(response.data.fileUploads, 'version');
let mostRecentFile: any = sortedList.reverse()[0];
let downloadUrl = MAGIC_API_FILES_BASE_URL + mostRecentFile.originalName;
setDownloadURL(downloadUrl);
setMostRecentFileUploadInfo(mostRecentFile);
SetFileUploadInfoPanelVisibility(true);
setExpanded('panel1');
}
else {
SetFileUploadInfoPanelVisibility(false);
setFileUploadData([]);
setMostRecentFileUploadInfo({} as any);
setDownloadURL('');
setExpanded(false);
}
});
}
return (
<div>
<Grid container spacing={2}>
<Grid item xs={12}>
<p style={{ marginLeft: 5, fontSize:'20px',color:'black' }}>Submissions </p>
<div><ContentList handleVisibility={onVisibilityChange} selectedContentId={selectedContentId} /></div>
</Grid>
{/* <Grid item xs={4}>
<p style={{ marginLeft: 5 }}>Milestones <Button variant="contained">UPdate</Button></p>
<div className="ag-theme-alpine" style={{ height: 400 }}><MilestoneList /></div>
</Grid> */}
<Grid item xs={12}>
{fileUploadInfopPanelVisivility ?
<div>
<Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
<Typography sx={{ width: '33%', flexShrink: 0,color:'black',fontSize:'20px' }}>
Uploaded Files and History
</Typography>
</AccordionSummary>
<AccordionDetails>
<Stack spacing={1}>
<Item>Type : {mostRecentFileUploadInfo.fileType.fileTypeName} </Item>
<Item>Version : {mostRecentFileUploadInfo.version}</Item>
<Item>File Name : {mostRecentFileUploadInfo.fileName} <a href={downloadURL}>Download</a></Item>
<Item>Uploaded By : {mostRecentFileUploadInfo.content.userInfo.longName}</Item>
<Item>Date Created : {moment(mostRecentFileUploadInfo.dateCreated).format('MM/DD/YYYY')}</Item>
</Stack>
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2bh-content"
id="panel2bh-header"
>
<Typography sx={{ width: '33%', flexShrink: 0 }}> File Upload History</Typography>
</AccordionSummary>
<AccordionDetails>
</AccordionDetails>
</Accordion>
</div>
: null}
</Grid>
</Grid>
</div>
);
}
export default SubmissionEditor;
