From baada231db7ecf23ff319dbd96e1683659cf8a3b Mon Sep 17 00:00:00 2001
From: Mark D'Avella <markdavella@gmail.com>
Date: Fri, 22 Mar 2024 14:04:54 -0400
Subject: [PATCH] testing

---
 web/src/components/InlineModal.tsx               | 16 ++++++++++++++--
 .../components/channel_config/PlexGridItem.tsx   |  2 +-
 .../channel_config/PlexProgrammingSelector.tsx   | 13 +++++++++++++
 web/src/helpers/inlineModalUtil.ts               |  6 +++++-
 web/src/helpers/util.ts                          |  1 +
 5 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/web/src/components/InlineModal.tsx b/web/src/components/InlineModal.tsx
index 88ee93b41..43e1fbe67 100644
--- a/web/src/components/InlineModal.tsx
+++ b/web/src/components/InlineModal.tsx
@@ -3,6 +3,7 @@ import { PlexMedia } from '@tunarr/types/plex';
 import { usePrevious } from '@uidotdev/usehooks';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import {
+  extractLastIndexes,
   firstItemInNextRow,
   getEstimatedModalHeight,
 } from '../helpers/inlineModalUtil';
@@ -26,7 +27,6 @@ const plexTypeString = forPlexMedia({
   track: 'Track',
   album: 'Album',
   artist: 'Artist',
-  default: 'All',
 });
 
 function InlineModal(props: InlineModalProps) {
@@ -121,6 +121,8 @@ function InlineModal(props: InlineModalProps) {
         {modalChildren?.map(
           (child: PlexMedia, idx: number, arr: PlexMedia[]) => (
             <React.Fragment key={child.guid}>
+              {console.log(child)}
+              {console.log('log ', idx, ' ', plexTypeString(child))}
               <InlineModal
                 modalIndex={childModalIndex} //to do
                 modalChildren={childModalChildren} //to do
@@ -134,7 +136,6 @@ function InlineModal(props: InlineModalProps) {
                 }
                 rowSize={rowSize}
                 type={plexTypeString(child)}
-                // firstItemInNextRow={firstItemInNextRow}
               />
               <PlexGridItem
                 key={child.guid}
@@ -159,6 +160,17 @@ function InlineModal(props: InlineModalProps) {
             </React.Fragment>
           ),
         )}
+        {/* This Modal is for last row items because they can't be inserted using the above inline modal */}
+        <InlineModal
+          modalIndex={childModalIndex}
+          modalChildren={childModalChildren}
+          rowSize={rowSize}
+          open={extractLastIndexes(
+            modalChildren,
+            modalChildren.length % rowSize,
+          ).includes(childModalIndex)}
+          type={'All'}
+        />
       </List>
     </Collapse>
   );
diff --git a/web/src/components/channel_config/PlexGridItem.tsx b/web/src/components/channel_config/PlexGridItem.tsx
index 8afb6c7f7..dfd11082b 100644
--- a/web/src/components/channel_config/PlexGridItem.tsx
+++ b/web/src/components/channel_config/PlexGridItem.tsx
@@ -72,7 +72,7 @@ const PlexGridItem = forwardRef(
 
     const handleClick = () => {
       setOpen(!open);
-      console.log('TEST');
+      console.log();
 
       if (moveModal) {
         moveModal();
diff --git a/web/src/components/channel_config/PlexProgrammingSelector.tsx b/web/src/components/channel_config/PlexProgrammingSelector.tsx
index 57c128183..dc5a0cd5e 100644
--- a/web/src/components/channel_config/PlexProgrammingSelector.tsx
+++ b/web/src/components/channel_config/PlexProgrammingSelector.tsx
@@ -31,6 +31,7 @@ import { chain, first, isEmpty, isNil, isUndefined, map } from 'lodash-es';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntersectionObserver } from 'usehooks-ts';
 import {
+  extractLastIndexes,
   firstItemInNextRow,
   getImagesPerRow,
 } from '../../helpers/inlineModalUtil';
@@ -294,6 +295,7 @@ export default function PlexProgrammingSelector() {
               <PlexListItem key={item.guid} item={item} />
             ) : (
               <React.Fragment key={item.guid}>
+                {console.log('log ', index, ' ', plexTypeString(item))}
                 <InlineModal
                   modalIndex={modalIndex}
                   modalChildren={modalChildren}
@@ -324,6 +326,17 @@ export default function PlexProgrammingSelector() {
               </React.Fragment>
             ),
           )}
+          {/* This Modal is for last row items because they can't be inserted using the above inline modal */}
+          <InlineModal
+            modalIndex={modalIndex}
+            modalChildren={modalChildren}
+            rowSize={rowSize}
+            open={extractLastIndexes(
+              collectionsData?.Metadata,
+              collectionsData?.Metadata.length % rowSize,
+            ).includes(modalIndex)}
+            type={'All'}
+          />
         </CustomTabPanel>,
       );
     }
diff --git a/web/src/helpers/inlineModalUtil.ts b/web/src/helpers/inlineModalUtil.ts
index 6d0082e8e..558035574 100644
--- a/web/src/helpers/inlineModalUtil.ts
+++ b/web/src/helpers/inlineModalUtil.ts
@@ -16,7 +16,10 @@ export function getEstimatedModalHeight(
 ): number {
   // Episode modals have smaller height, short circuit for  now
 
-  if (type === 'All') {
+  console.log('type: ', type);
+  if (type === 'Episode') {
+    console.log('MATCH!');
+
     return 143;
   }
   // Exit with defaults if container & image width are not provided
@@ -66,6 +69,7 @@ export function firstItemInNextRow(
     modalIndex >= numberOfItems - numberOfItemsLastRow &&
     numberOfItemsLastRow < itemsPerRow
   ) {
+    return -1;
     return numberOfItems - numberOfItemsLastRow;
   }
 
diff --git a/web/src/helpers/util.ts b/web/src/helpers/util.ts
index 322d804d3..ebd6a58f8 100644
--- a/web/src/helpers/util.ts
+++ b/web/src/helpers/util.ts
@@ -303,6 +303,7 @@ export const forTvGuideProgram = <T>(
 
 export const forPlexMedia = <T>(choices: PerTypeCallback<PlexMedia, T>) => {
   return (m: PlexMedia) => {
+    // console.log('m.type ===', m.type);
     switch (m.type) {
       case 'movie':
         if (choices.movie) return applyOrValue(choices.movie, m);