From c3dede7c515d5c50c98b42a1d2588704c2a93cbe Mon Sep 17 00:00:00 2001
From: Brent <brentkulwicki@gmail.com>
Date: Tue, 26 Sep 2023 11:59:49 -0400
Subject: [PATCH] pulls out the update logic for now

---
 .../EditForm/Steps/Media/MediaInfoForm.tsx    |  28 +--
 .../EditForm/Steps/Media/MediaStep.graphql    |   9 +-
 .../EditForm/Steps/Media/MediaStep.tsx        |  15 +-
 .../Steps/Media/VariantMediaAccordion.tsx     | 207 +++++++++++++++++-
 4 files changed, 217 insertions(+), 42 deletions(-)

diff --git a/src/scenes/ProgressReports/EditForm/Steps/Media/MediaInfoForm.tsx b/src/scenes/ProgressReports/EditForm/Steps/Media/MediaInfoForm.tsx
index e48fffa0ab..2c2ea83266 100644
--- a/src/scenes/ProgressReports/EditForm/Steps/Media/MediaInfoForm.tsx
+++ b/src/scenes/ProgressReports/EditForm/Steps/Media/MediaInfoForm.tsx
@@ -1,52 +1,44 @@
 import { Box, TextField } from '@mui/material';
+import { ProgressReportMediaCategory } from '~/api/schema.graphql';
 import {
   ProgressReportMediaCategoryLabels,
   ProgressReportMediaCategoryList,
 } from '~/api/schema/enumLists';
 import { labelFrom } from '~/common';
 import { Form, SelectField } from '~/components/form';
-import { minLength, required } from '~/components/form/validators';
-import { useCallback, useState } from 'react';
-import { ProgressReportMediaCategory } from '~/api/schema.graphql';
 
-// TODO type submitForm
-// @ts-ignore
 export const MediaInfoForm = ({
-  submitForm,
   disabled,
   initialValues,
 }: {
-  submitForm: any;
   disabled: boolean;
   initialValues: {
     category: ProgressReportMediaCategory | null;
     caption: string | null;
+    id: string;
   };
 }) => {
-  const [category, setCategory] = useState(initialValues.category);
-  const [caption, setCaption] = useState(initialValues.caption);
-  const updateMedia = useCallback(() => {
-    submitForm({ variables: {} });
-  }, []);
   return (
-    <Form onSubmit={submitForm}>
+    <Form
+      onSubmit={() => {
+        // placeholder for submit logic
+      }}
+    >
       <Box sx={{ p: 1, m: 1, flexGrow: 2 }}>
         <SelectField
           label="Photo Category"
           name="category"
-          disabled={disabled}
+          disabled={true}
           options={ProgressReportMediaCategoryList}
           variant="outlined"
           getOptionLabel={labelFrom(ProgressReportMediaCategoryLabels)}
-          defaultValue={
-            disabled ? null : category || ProgressReportMediaCategoryList[0]
-          }
+          defaultValue={disabled ? null : ProgressReportMediaCategoryList[0]}
         />
         <TextField
           variant="outlined"
           name="caption"
           label="Caption"
-          disabled={disabled}
+          disabled={true}
           placeholder="Enter Photo Caption"
           minRows={4}
           margin="none"
diff --git a/src/scenes/ProgressReports/EditForm/Steps/Media/MediaStep.graphql b/src/scenes/ProgressReports/EditForm/Steps/Media/MediaStep.graphql
index da226cdd27..97175f1fa7 100644
--- a/src/scenes/ProgressReports/EditForm/Steps/Media/MediaStep.graphql
+++ b/src/scenes/ProgressReports/EditForm/Steps/Media/MediaStep.graphql
@@ -27,5 +27,10 @@ mutation UpdateMedia($input: UpdateProgressReportMedia!) {
     }
   }
 }
-# placeholder for delete
-# placeholder for download
+mutation DeleteMedia($deleteProgressReportMediaId: ID!) {
+  deleteProgressReportMedia(id: $deleteProgressReportMediaId) {
+    parent {
+      id
+    }
+  }
+}
diff --git a/src/scenes/ProgressReports/EditForm/Steps/Media/MediaStep.tsx b/src/scenes/ProgressReports/EditForm/Steps/Media/MediaStep.tsx
index 72bd0ca711..65e850ddbc 100644
--- a/src/scenes/ProgressReports/EditForm/Steps/Media/MediaStep.tsx
+++ b/src/scenes/ProgressReports/EditForm/Steps/Media/MediaStep.tsx
@@ -5,7 +5,7 @@ import { useDropzone } from 'react-dropzone';
 import { useUploadFileAsync } from '~/components/files/hooks';
 import { DropOverlay } from '~/components/Upload/DropOverlay';
 import { StepComponent } from '../step.types';
-import { CreateMediaDocument, UpdateMediaDocument } from './MediaStep.graphql';
+import { CreateMediaDocument, DeleteMediaDocument } from './MediaStep.graphql';
 import { VariantMediaAccordion } from './VariantMediaAccordion';
 
 // TODO find types for actual uploadVariant here
@@ -15,11 +15,9 @@ export interface MediaVariantResponse {
 }
 export const MediaStep: StepComponent = ({ report }) => {
   const [createMedia] = useMutation(CreateMediaDocument);
-  const [updateMedia] = useMutation(UpdateMediaDocument);
+  const [deleteMedia] = useMutation(DeleteMediaDocument);
   const uploadFile = useUploadFileAsync();
 
-  // TODO remove this before going live
-  console.log(report);
   const handleFileUpload = async (files: File[]) => {
     const [uploadedImageInfo, finalizeUpload] = await uploadFile(files[0]);
     if (!uploadedImageInfo) {
@@ -35,8 +33,8 @@ export const MediaStep: StepComponent = ({ report }) => {
         },
       },
     }).then(...finalizeUpload.tap);
-    // finalizeUpload.tap;
   };
+
   const {
     getRootProps,
     getInputProps,
@@ -49,10 +47,6 @@ export const MediaStep: StepComponent = ({ report }) => {
     disabled: false,
   });
 
-  const chooseFileAndUpload = () => {
-    const file = openFileBrowser();
-    console.log(file);
-  };
   return (
     <div {...getRootProps()}>
       <Box sx={{ maxWidth: 'md' }}>
@@ -74,7 +68,7 @@ export const MediaStep: StepComponent = ({ report }) => {
                 />
                 <Box sx={{ display: 'block' }} key={variant.key}>
                   <VariantMediaAccordion
-                    updateMedia={updateMedia}
+                    deleteMedia={deleteMedia}
                     openFileBrowser={openFileBrowser}
                     response={{
                       item: report.media.items.filter(
@@ -82,6 +76,7 @@ export const MediaStep: StepComponent = ({ report }) => {
                       ),
                       uploadVariant: variant,
                     }}
+                    sensitivity={report.parent.sensitivity}
                     initiallyOpen={false}
                   />
                 </Box>
diff --git a/src/scenes/ProgressReports/EditForm/Steps/Media/VariantMediaAccordion.tsx b/src/scenes/ProgressReports/EditForm/Steps/Media/VariantMediaAccordion.tsx
index b8dc587eab..a7a5dc8a04 100644
--- a/src/scenes/ProgressReports/EditForm/Steps/Media/VariantMediaAccordion.tsx
+++ b/src/scenes/ProgressReports/EditForm/Steps/Media/VariantMediaAccordion.tsx
@@ -1,39 +1,213 @@
-import { AddPhotoAlternate, ExpandMore } from '@mui/icons-material';
+import {
+  Add,
+  AddPhotoAlternate,
+  Delete,
+  ExpandMore,
+  GetApp,
+  MoreVert,
+  Publish,
+} from '@mui/icons-material';
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
   Box,
+  Button,
+  ClickAwayListener,
+  Grow,
   IconButton,
+  Link,
+  MenuItem,
+  MenuList,
+  Paper,
+  Popper,
+  Stack,
 } from '@mui/material';
-import { useState } from 'react';
+import {
+  KeyboardEvent,
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Sensitivity as SensitivityType } from '~/api/schema/schema.graphql';
 import { RoleIcon } from '~/components/RoleIcon';
+import { SensitivityIcon } from '~/components/Sensitivity';
 import { MediaInfoForm } from './MediaInfoForm';
 import { MediaVariantResponse } from './MediaStep';
 
+// TODO update types
+const MoreActionsButton = ({
+  uploadImage,
+  downloadUrl,
+  deleteImage,
+}: {
+  uploadImage: any;
+  downloadUrl: string;
+  deleteImage: any;
+}) => {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement>(null);
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event: Event | SyntheticEvent) => {
+    if (
+      anchorRef.current &&
+      anchorRef.current.contains(event.target as HTMLElement)
+    ) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  function handleListKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    } else if (event.key === 'Escape') {
+      setOpen(false);
+    }
+  }
+
+  // return focus to the button when we transitioned from !open -> open
+  const prevOpen = useRef(open);
+  useEffect(() => {
+    if (prevOpen.current && !open) {
+      anchorRef.current!.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  return (
+    <Stack direction="row" spacing={2}>
+      <div>
+        <Button
+          ref={anchorRef}
+          id="composition-button"
+          aria-controls={open ? 'composition-menu' : undefined}
+          aria-expanded={open ? 'true' : undefined}
+          aria-haspopup="true"
+          onClick={handleToggle}
+          sx={{ padding: '6px 0px', justifyContent: 'right' }}
+        >
+          <MoreVert sx={{ color: 'grey' }} />
+        </Button>
+        <Popper
+          open={open}
+          anchorEl={anchorRef.current}
+          role={undefined}
+          placement="bottom-start"
+          transition
+          disablePortal
+        >
+          {({ TransitionProps, placement }) => (
+            <Grow
+              {...TransitionProps}
+              style={{
+                transformOrigin:
+                  placement === 'bottom-start' ? 'left top' : 'left bottom',
+              }}
+            >
+              <Paper>
+                <ClickAwayListener onClickAway={handleClose}>
+                  <MenuList
+                    autoFocusItem={open}
+                    id="composition-menu"
+                    aria-labelledby="composition-button"
+                    onKeyDown={handleListKeyDown}
+                  >
+                    <Link href={downloadUrl} download underline="none">
+                      <MenuItem onClick={handleClose}>
+                        <GetApp /> Download
+                      </MenuItem>
+                    </Link>
+                    <MenuItem onClick={handleClose}>
+                      <Publish /> Upload Revised
+                    </MenuItem>
+                    <MenuItem onClick={handleClose}>
+                      <Add /> Upload Alternate
+                    </MenuItem>
+                    <MenuItem onClick={deleteImage}>
+                      <Delete /> Delete
+                    </MenuItem>
+                  </MenuList>
+                </ClickAwayListener>
+              </Paper>
+            </Grow>
+          )}
+        </Popper>
+      </div>
+    </Stack>
+  );
+};
+
 const ImageBox = ({
   media,
+  sensitivity,
   openFileBrowser,
+  deleteMedia,
 }: {
   media: any[];
+  sensitivity: SensitivityType;
   openFileBrowser: any;
+  deleteMedia: any;
 }) => {
   return (
     <>
       {media.length ? (
-        // TODO replace with image when it exists
         <Box
           sx={{
             borderRadius: '3px',
             backgroundColor: 'rgba(0, 0, 0, 0.12)',
             p: 1,
-            pt: 6,
             m: 1,
             flexGrow: 1.75,
             textAlign: 'center',
+            maxWidth: '180px',
+            maxHeight: '180px',
+            position: 'relative',
           }}
         >
-          <img src={media[0].media.file.url} alt={media[0].media.altText} />
+          <Box
+            sx={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              zIndex: 150,
+              backgroundColor: '#e4e4e4',
+            }}
+          >
+            <SensitivityIcon value={sensitivity} />
+          </Box>
+          <Box
+            sx={{
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              zIndex: 150,
+              backgroundColor: '#e4e4e4',
+            }}
+          >
+            <MoreActionsButton
+              uploadImage={openFileBrowser}
+              downloadUrl={media[0].media.file.url}
+              deleteImage={deleteMedia}
+            />
+          </Box>
+          {/* TODO - fix static nature of what file we are showing */}
+          <Box
+            component="img"
+            sx={{ objectFit: 'contain', height: '100%', width: '100%' }}
+            src={media[0].media.file.url}
+            alt={media[0].media.altText}
+            crossOrigin="use-credentials"
+          />
         </Box>
       ) : (
         <Box
@@ -61,15 +235,21 @@ export const VariantMediaAccordion = ({
   openFileBrowser,
   response,
   initiallyOpen,
-  updateMedia,
+  sensitivity,
+  deleteMedia,
 }: {
   openFileBrowser: any;
   response: MediaVariantResponse;
   initiallyOpen: boolean;
-  updateMedia: any;
+  sensitivity: SensitivityType;
+  deleteMedia: any;
 }) => {
   const [expanded, setExpanded] = useState(initiallyOpen);
-
+  const deleteCurrentMedia = useCallback(async () => {
+    await deleteMedia({
+      variables: { deleteProgressReportMediaId: response.item[0]?.id },
+    });
+  }, [deleteMedia, response.item]);
   return (
     <Accordion key={response.uploadVariant.key} expanded={expanded} square>
       <AccordionSummary
@@ -87,16 +267,19 @@ export const VariantMediaAccordion = ({
       </AccordionSummary>
       <AccordionDetails>
         <Box sx={{ display: 'flex', p: '0px 16px' }}>
-          <ImageBox media={response.item} openFileBrowser={openFileBrowser} />
+          <ImageBox
+            media={response.item}
+            openFileBrowser={openFileBrowser}
+            deleteMedia={deleteCurrentMedia}
+            sensitivity={sensitivity}
+          />
           <MediaInfoForm
             initialValues={{
               category: response.item[0]?.category,
               caption: response.item[0]?.media?.caption,
+              id: response.item[0]?.id,
             }}
             disabled={!response.item}
-            submitForm={() => {
-              console.log('submit');
-            }}
           />
         </Box>
       </AccordionDetails>