/**
 * @Move (SQKG)
 * Only used by BulkUploadFiles - move with it to BulkUpload/
 */
import FolderIcon from '@material-hu/icons/material/Folder';
import ListItem from '@material-hu/mui/ListItem';
import ListItemIcon from '@material-hu/mui/ListItemIcon';
import ListItemText from '@material-hu/mui/ListItemText';

import useDocumentFolders from 'src/hooks/queryHooks/useDocumentFolders';
import { DocumentFolder } from 'src/types/documents';

import FormAutocomplete, {
  Props as FormAutoCompleteProps,
} from 'src/components/FormInputs/FormAutocomplete';

function FoldersAutocomplete(props: FormAutoCompleteProps) {
  const { data: folders = [], isLoading } = useDocumentFolders(null, {
    staleTime: Infinity,
    select: response => response.data.items,
  });

  return (
    <FormAutocomplete
      {...props}
      loading={isLoading}
      autocompleteProps={{
        options: folders,
        getOptionLabel: (folder: DocumentFolder) => folder.name || '',
        isOptionEqualToValue: (option: DocumentFolder, value: DocumentFolder) =>
          option.id === value.id,
        renderOption: (liProps, option: DocumentFolder) => (
          <ListItem
            {...liProps}
            key={option.id}
          >
            <ListItemIcon>
              <FolderIcon />
            </ListItemIcon>
            <ListItemText>{option.name}</ListItemText>
          </ListItem>
        ),
      }}
    />
  );
}

export default FoldersAutocomplete;