// @flow

import * as React from 'react';
import { Text, View } from 'react-native';

import type { AccountUserInfo, UserListItem } from 'lib/types/user-types';

import TagInput from '../components/tag-input.react';
import UserList from '../components/user-list.react';
import { useStyles } from '../themes/colors';

type Props = {|
  +usernameInputText: string,
  +updateUsernameInput: (text: string) => void,
  +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
  +updateTagInput: (items: $ReadOnlyArray<AccountUserInfo>) => void,
  +otherUserInfos: { [id: string]: AccountUserInfo },
  +userSearchResults: $ReadOnlyArray<UserListItem>,
|};

const inputProps = {
  placeholder: 'username',
  autoFocus: true,
  returnKeyType: 'go',
};

export default React.memo<Props>(function MessageListThreadSearch({
  usernameInputText,
  updateUsernameInput,
  userInfoInputArray,
  updateTagInput,
  otherUserInfos,
  userSearchResults,
}) {
  const styles = useStyles(unboundStyles);

  const onUserSelect = React.useCallback(
    (userID: string) => {
      for (const existingUserInfo of userInfoInputArray) {
        if (userID === existingUserInfo.id) {
          return;
        }
      }
      const newUserInfoInputArray = [
        ...userInfoInputArray,
        otherUserInfos[userID],
      ];
      updateUsernameInput('');
      updateTagInput(newUserInfoInputArray);
    },
    [otherUserInfos, updateTagInput, updateUsernameInput, userInfoInputArray],
  );

  const tagDataLabelExtractor = React.useCallback(
    (userInfo: AccountUserInfo) => userInfo.username,
    [],
  );

  const isSearchResultVisible =
    (userInfoInputArray.length === 0 || usernameInputText.length > 0) &&
    userSearchResults.length > 0;

  let separator = null;
  let userList = null;
  if (isSearchResultVisible) {
    userList = (
      <View style={styles.userList}>
        <UserList userInfos={userSearchResults} onSelect={onUserSelect} />
      </View>
    );
    separator = <View style={styles.separator} />;
  }

  const showMessageList = userInfoInputArray.length > 0;
  const userSelectionHeightStyle = showMessageList
    ? styles.userSelectionLimitedHeight
    : null;
  return (
    <>
      <View style={[styles.userSelection, userSelectionHeightStyle]}>
        <View style={styles.tagInputContainer}>
          <Text style={styles.tagInputLabel}>To: </Text>
          <View style={styles.tagInput}>
            <TagInput
              value={userInfoInputArray}
              onChange={updateTagInput}
              text={usernameInputText}
              onChangeText={updateUsernameInput}
              labelExtractor={tagDataLabelExtractor}
              inputProps={inputProps}
            />
          </View>
        </View>
        {userList}
      </View>
      {separator}
    </>
  );
});

const unboundStyles = {
  userSelection: {
    backgroundColor: 'panelBackground',
  },
  userSelectionLimitedHeight: {
    maxHeight: 500,
  },
  tagInputLabel: {
    color: 'modalForegroundSecondaryLabel',
    fontSize: 16,
    paddingLeft: 12,
  },
  tagInputContainer: {
    alignItems: 'center',
    backgroundColor: 'modalForeground',
    borderBottomWidth: 1,
    borderColor: 'modalForegroundBorder',
    flexDirection: 'row',
    paddingVertical: 6,
  },
  tagInput: {
    flex: 1,
  },
  userList: {
    backgroundColor: 'modalBackground',
    paddingLeft: 35,
    paddingRight: 12,
  },
  separator: {
    height: 1,
    backgroundColor: 'modalForegroundBorder',
  },
};

@@ -1767,16 +1767,89 @@
 = null;%0A
+  let userSelectionAdditionalStyles = styles.userSelectionLimitedHeight;%0A
   if (is
@@ -2078,171 +2078,53 @@
 ;%0A  
-%7D%0A%0A  const showMessageList = userInfoInputArray.length %3E 0;%0A  const userSelectionHeightStyle = showMessageList%0A    ? styles.userSelectionLimitedHeight%0A    :
+  userSelectionAdditionalStyles =
  null;%0A
+  %7D%0A%0A
   re
@@ -2196,19 +2196,24 @@
 tion
-Height
+Additional
 Style
+s
 %5D%7D%3E%0A
@@ -2841,16 +2841,29 @@
 round',%0A
+    flex: 1,%0A
   %7D,%0A  u
@@ -2899,21 +2899,14 @@
     
-maxHeight: 50
+flex: 
 0,%0A 
@@ -3353,24 +3353,37 @@
 gRight: 12,%0A
+    flex: 1,%0A
   %7D,%0A  separ

Fix users list not being fully scrollable