multi-downloader-nx_mirror/gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx

import React, { RefObject } from 'react';
import { Box, ClickAwayListener, Divider, List, ListItem, Paper, TextField, Typography } from '@mui/material';
import { SearchResponse } from '../../../../../../@types/messageHandler';
import useStore from '../../../hooks/useStore';
import { messageChannelContext } from '../../../provider/MessageChannel';
import './SearchBox.css';
import ContextMenu from '../../reusable/ContextMenu';
import { useSnackbar } from 'notistack';

const SearchBox: React.FC = () => {
    const messageHandler = React.useContext(messageChannelContext);
    const [store, dispatch] = useStore();
    const [search, setSearch] = React.useState('');

    const [focus, setFocus] = React.useState(false);

    const [searchResult, setSearchResult] = React.useState<undefined|SearchResponse>();
    const anchor = React.useRef<HTMLDivElement>(null);

    const { enqueueSnackbar } = useSnackbar();

    const selectItem = (id: string) => {
        dispatch({
            type: 'downloadOptions',
            payload: {
                ...store.downloadOptions,
                id
            }
        });
    };

    React.useEffect(() => {
        if (search.trim().length === 0)
            return setSearchResult({ isOk: true, value: [] });

        const timeOutId = setTimeout(async () => {
            if (search.trim().length > 3) {
                const s = await messageHandler?.search({search});
                if (s && s.isOk)
                    s.value = s.value.slice(0, 10);
                setSearchResult(s);
            }
        }, 500);
        return () => clearTimeout(timeOutId);
    }, [search]);

    const anchorBounding = anchor.current?.getBoundingClientRect();
    return <ClickAwayListener onClickAway={() => setFocus(false)}>
        <Box sx={{ m: 2 }}>
            <TextField ref={anchor} value={search} onClick={() => setFocus(true)} onChange={e => setSearch(e.target.value)} variant='outlined' label='Search' fullWidth  />
            {searchResult !== undefined && searchResult.isOk && searchResult.value.length > 0 && focus &&
      <Paper sx={{ position: 'fixed', maxHeight: '50%', width: `${anchorBounding?.width}px`,
          left: anchorBounding?.x, top: (anchorBounding?.y ?? 0) + (anchorBounding?.height ?? 0), zIndex: 99, overflowY: 'scroll'}}>
          <List>
              {searchResult && searchResult.isOk ?
                  searchResult.value.map((a, ind, arr) => {
                      const imageRef = React.createRef<HTMLImageElement>();
                      const summaryRef = React.createRef<HTMLParagraphElement>();
                      return <Box key={a.id}>
                          <ListItem className='listitem-hover' onClick={() => {
                              selectItem(a.id);
                              setFocus(false);
                          }}>
                              <Box sx={{ display: 'flex' }}>
                                  <Box sx={{ width: '20%', height: '100%', pr: 2 }}>
                                      <img ref={imageRef} src={a.image} style={{ width: '100%', height: 'auto' }} alt="thumbnail"/>
                                  </Box>
                                  <Box sx={{ display: 'flex', flexDirection: 'column', maxWidth: '70%' }}>
                                      <Typography variant='h6' component='h6' color='text.primary' sx={{  }}>
                                          {a.name}
                                      </Typography>
                                      {a.desc && <Typography variant='caption' component='p' color='text.primary' sx={{ pt: 1, pb: 1 }} ref={summaryRef}>
                                          {a.desc}
                                      </Typography>}
                                      {a.lang && <Typography variant='caption' component='p' color='text.primary' sx={{  }}>
                        Languages: {a.lang.join(', ')}
                                      </Typography>}
                                      <Typography variant='caption' component='p' color='text.primary' sx={{  }}>
                        ID: {a.id}
                                      </Typography>
                                  </Box>
                              </Box>
                          </ListItem>
                          <ContextMenu options={[ { text: 'Copy image URL', onClick: async () => {
                              await navigator.clipboard.writeText(a.image);
                              enqueueSnackbar('Copied URL to clipboard', {
                                  variant: 'info'
                              });
                          }},
                          {
                              text: 'Open image in new tab',
                              onClick: () => {
                                  window.open(a.image);
                              }
                          } ]} popupItem={imageRef as RefObject<HTMLElement>} />
                          {a.desc &&
                  <ContextMenu options={[
                      {
                          onClick: async () => {
                              await navigator.clipboard.writeText(a.desc!);
                              enqueueSnackbar('Copied summary to clipboard', {
                                  variant: 'info'
                              });
                          },
                          text: 'Copy summary to clipboard'
                      }
                  ]} popupItem={summaryRef as RefObject<HTMLElement>} />
                          }
                          {(ind < arr.length - 1) && <Divider />}
                      </Box>;
                  })
                  : <></>}
          </List>
      </Paper>}
        </Box>
    </ClickAwayListener>;
};

export default SearchBox;