import {
Box,
Card,
CardContent,
Chip,
Divider,
Grid,
IconButton,
Menu,
MenuItem,
Skeleton,
Typography,
} from '@mui/material';
import { DAY_MS, formatDate } from '../../common/lib/date';
import { Icon } from '@iconify/react';
import { MoloDoc } from '../../common/types/molo/moloDoc';
import { MoloShareState, MoloShareType } from '../../common/types/molo/moloShare';
import { useAgentData, useMyProfile } from '../../common/hooks/auth';
import { useBrowserNavigate } from '../../common/hooks/useBrowserNavigate';
import { useMutationShare } from '../../common/hooks/useMutationShare';
import { useQueryMoloDocs } from '../../common/hooks/useQueryMoloDocs';
import { useState } from 'react';
import castArray from 'lodash/castArray';
import ShareDialog from '../../docs/components/shareDialog';
interface AgentDocsProps {
keyword?: string;
clientId: number;
processId: number;
}
const AgentDocs = ({ keyword, clientId, processId }: AgentDocsProps) => {
const agentData = useAgentData();
const profile = useMyProfile();
const { mutate } = useMutationShare();
const { openNewTab } = useBrowserNavigate();
const [isShareOpen, setIsShareOpen] = useState(false);
const [activeDoc, setActiveDoc] = useState<{ anchorEl: HTMLElement | null; doc: MoloDoc } | null>(
null,
);
const documentIds = [
...castArray(agentData?.item.DashboardContent?.item).map(({ contentuid }) => contentuid),
...castArray(agentData?.item.LibraryContent?.item).map(({ contentuid }) => contentuid),
];
const { data: docs } = useQueryMoloDocs(documentIds, keyword);
const handleClickPreview = () => {
if (activeDoc && profile) {
mutate(
{
docId: activeDoc.doc._id,
docContentType: activeDoc.doc.type?.code,
docTitle: activeDoc.doc.metaProperties.title,
docImage: activeDoc.doc.metaImage,
shareType: MoloShareType.preview,
agentId: profile.id,
state: MoloShareState.authorized,
clientId,
processId,
},
{
onSuccess: (response) => {
openNewTab(`/share/${response.item.token}`);
},
},
);
}
setActiveDoc(null);
};
const handleClickShare = () => {
setIsShareOpen(true);
setActiveDoc((value) =>
value
? {
...value,
anchorEl: null,
}
: null,
);
};
const handleCloseShare = () => {
setActiveDoc(null);
setIsShareOpen(false);
};
if (!agentData || !docs || !profile) {
return <Skeleton variant="rectangular" height={160} />;
}
return (
<Box>
{docs.result.map((doc) => {
const updatedAt = new Date(doc._updatedAt);
return (
<Card key={doc._id} elevation={6} sx={{ mb: 4 }}>
<CardContent>
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
<Grid item xs={6} sx={{ display: 'flex' }}>
<Box
component="img"
sx={{
height: 112,
width: 112,
mr: 3,
objectFit: 'cover',
}}
alt=""
src={doc.metaImage}
/>
<Box>
<Typography variant="h5" fontWeight={700}>
{doc.metaProperties.title}
</Typography>
<Typography variant="subtitle2" color="text.secondary" sx={{ mt: 1 }}>
By {doc.author?.name} - {formatDate(updatedAt)}
</Typography>
<Box sx={{ mt: 1 }}>
{Date.now() - updatedAt.getTime() < 3 * DAY_MS && (
<Chip color="info" label="new" sx={{ mr: 2 }} />
)}
{doc.type && <Chip label={doc.type.name} />}
</Box>
</Box>
</Grid>
<Grid item xs={6} sx={{ display: 'flex' }}>
<Divider orientation="vertical" sx={{ minHeight: 128, mr: 3 }} />
<Typography variant="subtitle2" color="text.secondary" sx={{ flexGrow: 1 }}>
{doc.metaProperties.description}
</Typography>
<Box>
<IconButton
size="small"
onClick={({ currentTarget }) =>
setActiveDoc({ anchorEl: currentTarget, doc })
}
>
<Icon width={24} icon="material-symbols:more-vert" />
</IconButton>
</Box>
</Grid>
</Grid>
</CardContent>
</Card>
);
})}
<Menu
anchorEl={activeDoc?.anchorEl}
open={Boolean(activeDoc?.anchorEl)}
onClose={() => setActiveDoc(null)}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={handleClickPreview}>Preview</MenuItem>
<MenuItem onClick={handleClickShare}>Share</MenuItem>
</Menu>
<ShareDialog
agentId={profile.id}
doc={isShareOpen ? activeDoc?.doc : undefined}
onClose={handleCloseShare}
clientId={clientId}
processId={processId}
/>
</Box>
);
};
export default AgentDocs;