SelectionDrawer.js

'use strict';

import React, { Fragment, forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react';

import {
  ActivityIndicator,
  StyleSheet,
} from 'react-native';

import * as Clipboard from 'expo-clipboard';

import {
  FAB,
  Portal,
  Snackbar,
} from 'react-native-paper';

import DraggableDrawer from './DraggableDrawer';
import TagContainer from './TagContainer';
import Settings, { SettingsContext } from './Settings';
import TagEditorView from './TagEditorView';
import Animated, { LinearTransition } from 'react-native-reanimated';

const styles = StyleSheet.create({
  defaultStyle: {
    position: 'absolute',
    width: '100%',
    bottom: 0
  },
  bottomFabContainer: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    flexDirection: 'row',
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'center',
    padding: 8,
  },
  bottomFab: {
    elevation: 8,
    margin: 8,
  },
  expanded: {
    height: '100%'
  },
  contracted: {
    height: 300
  },
  closed: {
    height: 1
  }
});

const shuffleTags = (arr, start, end) => {
  for (let i = start; i < end; i++) {
    const startIdx = i;
    const span = end - startIdx;
    const element = startIdx + Math.floor(Math.random() * span);
    const temp = arr[i];
    arr[i] = arr[element];
    arr[element] = temp;
  }
}

const getShuffledSelection = (selectedItems, shuffle, maxTags) => {
  let highPriIdx = 0; // So we can shuffle low-pri first.

  // Since all high priority and added tags are at the top of the list, this prefers them.
  const duplicatesRemoved = selectedItems.reduce((acc, value) => {
    if (acc.findIndex(x => { return value.text == x.text; }) >= 0) {
      return acc;
    } else {
      if (value.highPriority) highPriIdx++;
      return acc.concat(value);
    }
  }, new Array());

  if (shuffle) {
    // Shuffle high priority tags
    shuffleTags(duplicatesRemoved, 0, highPriIdx);

    // Shuffle low priority tags
    shuffleTags(duplicatesRemoved, highPriIdx, duplicatesRemoved.length);

    // Shuffle first n tags
    const truncationLength = Math.min(maxTags, duplicatesRemoved.length);
    shuffleTags(duplicatesRemoved, 0, truncationLength);
  }

  return duplicatesRemoved;
}

const SelectionDrawer = forwardRef((props, ref) => {
  const { copyLimit } = useContext(SettingsContext);
  const [shuffle, setShuffle] = useState(false);
  const [maxTags, setMaxTags] = useState(copyLimit);
  const [shuffledTags, setShuffledTags] = useState(new Array());
  const [{ visible: copiedSnackbarVisible, message: snackbarMessage }, setSnackbar] = useState(false);
  const [addedItems, setAddedItems] = useState(new Array());
  const [selectedItems, setSelectedItems] = useState(new Array());
  const [editModalVisible, setEditModalVisible] = useState(false);

  useEffect(() => {
    if (props.open) {
      setMaxTags(copyLimit);
    }
  }, [props.open]);

  // Must be called to order a reshuffle.
  const selectionChanged = (added, removed) => {
    const highPriColor = 'red';
    const lowPriColor = '';
    let items = [...selectedItems];

    if (removed) {
      for (const path of removed) {
        items = items.filter(x => x.path.toString() != path.toString());
      }
    }

    if (added) {
      for (const { path, node } of added) {
        if (node.data) {
          const newItems = node.data.map(x => {
            return {
              text: x,
              color: node.highPriority ? highPriColor : lowPriColor,
              path: path,
              highPriority: node.highPriority,
            };
          });
          if (node.highPriority) {
            items = newItems.concat(items);
          } else {
            items = items.concat(newItems);
          }
        }
      }
    }

    setSelectedItems(items);
    const shuffledTags = getShuffledSelection(addedItems.concat(items), shuffle, maxTags);
    setShuffledTags(shuffledTags);
  }

  useImperativeHandle(ref, () => {
    return {
      selectionCancelled: () => {
        setAddedItems(new Array());
        setSelectedItems(new Array());
        setShuffledTags(new Array());
      },
      selectionChanged
    };
  }, [selectedItems, addedItems]);

  useEffect(() => {
    const shuffledTags = getShuffledSelection(addedItems.concat(selectedItems), shuffle, maxTags);
    setShuffledTags(shuffledTags);
  }, [shuffle])

  const copyTags = () => {
    const firstNTags = getUnculledItems().slice(0, maxTags ? maxTags : undefined);
    const tagsString = firstNTags.reduce((acc, x) => {
      return acc + "#" + x.text + " ";
    }, "");
    console.log("Copying to clipboad:");
    console.log(tagsString);
    Clipboard.setStringAsync(tagsString)
      .then(() => setSnackbar({ visible: true, message: "Tags copied to clipboard!" }))
      .catch((e) => setSnackbar({ visible: true, message: `Failed to copy to clipboard: ${e}` }));
  }

  const getUnculledItems = () => {
    return shuffledTags.filter(x => !x.cull);
  }

  const onRemove = (text) => {
    const newShuffle = JSON.parse(JSON.stringify(shuffledTags));
    const idx = newShuffle.findIndex((x) => x.text == text);
    const addedIdx = addedItems.findIndex((x) => x.text == text);

    if (addedIdx > -1) {
      newShuffle.splice(idx, 1);
      addedItems.splice(addedIdx, 1);
      setShuffledTags(newShuffle);
      return true;
    } else {
      const newSelection = JSON.parse(JSON.stringify(selectedItems));
      const selectedIdx = newSelection.findIndex((x) => x.text == text);
      const curItem = newShuffle[idx]
      const selectedItem = newSelection[selectedIdx]
      curItem.cull = selectedItem.cull = !curItem.cull;
      if (curItem.cull) {
        curItem.opacity = selectedItem.opacity = 0.3;
      } else {
        curItem.opacity = selectedItem.opacity = 1.0;
      }
      setSelectedItems(newSelection);
      setShuffledTags(newShuffle);
      return false;
    }
  }

  const onAddItems = (items) => {
    const newItems = items.map(x => { return { text: x, color: '#ccf', highPriority: true } });
    setAddedItems(addedItems.concat(newItems));
    setShuffledTags(newItems.concat(shuffledTags));
    setEditModalVisible(false);
  }

  const onReorderItems = (items) => {
    setShuffledTags(items);
  };

  const onCycleMaxTags = () => {
    const values = Object.values(Settings.maxTagOptions);
    const idx = values.indexOf(maxTags);
    setMaxTags(values[(idx + 1) % values.length]);
  }

  const unculledItems = getUnculledItems();
  const quota = unculledItems &&
    unculledItems.length > maxTags ? maxTags : unculledItems.length;

  const previewComponents =
    <TagContainer
      preview
      stylePredicate={(_item, idx) => idx && maxTags > 0 && idx >= maxTags && { opacity: 0.1 }}
      style={{ width: '100%', height: '100%' }}
      items={unculledItems}
      onReorderItems={() => { }} />
  const chipComponents =
    <TagEditorView
      style={{ width: '100%', height: '100%' }}
      items={shuffledTags}
      onRemoveItem={onRemove}
      onAddItems={onAddItems}
      onReorderItems={onReorderItems}
      editModalVisible={editModalVisible}
      onRequestModalClose={() => setEditModalVisible(false)} />

  return (
    <Fragment>
      <DraggableDrawer
        layout={LinearTransition}
        style={[styles.defaultStyle, props.open ? (props.expanded ? styles.expanded : styles.contracted) : styles.closed]}
        expanded={props.expanded}
        onExpandPressed={props.onExpandPressed}
        open={props.open}
        contentMin={previewComponents}
        contentMax={chipComponents} />
      <Portal>
        <Animated.View style={styles.bottomFabContainer} layout={LinearTransition}>
          {
            maxTags >= 0 ?
              (
                props.open && (
                  props.expanded ?
                    <Fragment>
                      <FAB key="add" style={styles.bottomFab} icon="plus" onPress={() => setEditModalVisible(true)} />
                      <FAB key="shuffle" style={styles.bottomFab} icon={shuffle ? "shuffle" : "shuffle-disabled"} onPress={() => setShuffle(!shuffle)} />
                      <FAB key="clipboard" style={styles.bottomFab} icon="clipboard" onPress={copyTags} />
                    </Fragment>
                    :
                    <Fragment>
                      <FAB key="limit" style={styles.bottomFab} label={maxTags ? quota + "/" + maxTags : "No Limit"} icon="speedometer" onPress={onCycleMaxTags} />
                      <FAB key="shuffle" style={styles.bottomFab} icon={shuffle ? "shuffle" : "shuffle-disabled"} onPress={() => setShuffle(!shuffle)} />
                      <FAB key="clipboard" style={styles.bottomFab} disabled={!unculledItems.length} icon="clipboard" onPress={copyTags} />
                    </Fragment>
                )
              ) : <ActivityIndicator />
          }
        </Animated.View>
        <Snackbar
          duration={1500}
          visible={copiedSnackbarVisible}
          onDismiss={() => setSnackbar({ visible: false })}
          action={{
            label: 'Dismiss',
            onPress: () => setSnackbar({ visible: false }),
          }}
        >
          {snackbarMessage}
        </Snackbar>
      </Portal>
    </Fragment>
  );
});

export default SelectionDrawer;