import React, {useState, useEffect, useCallback} from 'react';
import {View, TouchableOpacity} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useDispatch, shallowEqual} from 'react-redux';
import {Typography, InputSearch} from '@components';
import UsersSectionList from '@components/UsersSectionList';
import Icon from '@components/Icon';
import Text from '@components/Text';
import {User} from '@interfaces/user';
import {Navigation} from '@interfaces/navigation';
import {
  getUsersList,
  getSectionListUsers,
  getEmployeesToAcknowledgeList,
  searchUser,
} from '@modules/search/store';
import {UserListSearchParams} from '@modules/search/interfaces';
import {useSearchText} from '@modules/search/hooks/useSearchText';
import {useAppSelector} from '@redux/utils';
import {INITIAL_PAGE} from '@services/constants';
import {COLORS} from '@shared/colors';
import {SHARED_STRINGS} from '@shared/strings';
import {toggleArrayElement} from '@shared/utils';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface UsersListTabInterface
  extends Navigation<Screens.SEARCH | Screens.SELECT_USERS> {
  selectUsers?: boolean;
  selectedUsers?: User[];
  handleSelect?: (item: number | number[] | User) => void;
  usersList?: User[];
  fieldValue?: string;
  usersCount?: number;
  showTabBar?: boolean;
  onSelectedChange?: (newUsers: User[]) => void;
}

// TODO: Pending HuGo migration
function UsersListTab({
  navigation,
  route,
  selectUsers,
  selectedUsers: selectedUsersProp,
  handleSelect,
  usersList,
  fieldValue,
  usersCount,
  showTabBar,
  onSelectedChange,
}: UsersListTabInterface) {
  const {t} = useTranslation();
  const dispatch = useDispatch();
  const {value, setValue} = useSearchText();
  const {theme} = useTheme();
  const {users, loadingUsers, loadingMoreUsers, filteredUsers, text} =
    useAppSelector(({search}) => search, shallowEqual);

  const [initialLoading, setInitialLoading] = useState(true);
  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
  const {acknowledgedSearch, fromWidgets} = (route.params ||
    {}) as UserListSearchParams;
  const isDisabled = selectedUsers.length < 1;

  useEffect(() => {
    onSelectedChange?.(selectedUsers);
  }, [onSelectedChange, selectedUsers]);

  useEffect(() => {
    dispatch(
      searchUser({
        text,
        isAcknowledgement: !!acknowledgedSearch,
      }),
    );
  }, [acknowledgedSearch, dispatch, text]);

  useEffect(() => {
    fieldValue && navigation.setOptions({headerTitle: () => null});
  }, [fieldValue, navigation]);

  useEffect(() => {
    (loadingUsers || users || usersList) && setInitialLoading(false);
  }, [loadingUsers, users, usersList]);

  useEffect(() => {
    usersList
      ? dispatch(getSectionListUsers(usersList))
      : acknowledgedSearch
      ? dispatch(getEmployeesToAcknowledgeList({page: INITIAL_PAGE}))
      : dispatch(
          getUsersList({
            page: INITIAL_PAGE,
          }),
        );
  }, [acknowledgedSearch, dispatch, usersList]);

  const onHandleRedirect = (item: User) => {
    if (selectUsers) {
      setSelectedUsers((prevSelectedUsers: User[]) =>
        toggleArrayElement(prevSelectedUsers, item, user => user.id),
      );
    } else if (handleSelect) {
      handleSelect(item.id);
      navigation.goBack();
    } else if (acknowledgedSearch) {
      navigation.navigate(Screens.PUBLISH_ACKNOWLEDGEMENT, {
        acknowledgedSearch: {
          value: {
            fullName: `${item.firstName} ${item.lastName}`,
            userId: item.id,
          },
          key: 'acknowledged',
        },
      });
    } else {
      navigation.push(Screens.PROFILE, {userId: item.id});
    }
  };

  const handleSelectUsers = (): void => {
    handleSelect?.(selectedUsers.map(user => user.id));
    navigation.goBack();
  };

  const firstHeaderComponent = () =>
    selectUsers ? (
      <View style={styles.selectParticipantsButton}>
        <Text variant="body2" style={styles.headerText}>
          {`${t(
            selectUsers ? 'chats.select_users' : 'chats.select_participants',
          )} (${selectedUsers.length})`}
        </Text>
        <TouchableOpacity
          onPress={selectUsers ? handleSelectUsers : undefined}
          disabled={isDisabled}>
          <Text
            variant="body2"
            weight="bold"
            color={isDisabled ? COLORS.DARK_GRAY : COLORS.GREEN_EIGHT}
            style={styles.headerText}>
            {t(SHARED_STRINGS.SAVE)}
          </Text>
        </TouchableOpacity>
      </View>
    ) : null;

  const secondHeaderComponent = () => (
    <>
      {!!usersCount && fromWidgets && showTabBar && (
        <View style={styles.peopleCountContainer}>
          <Icon name="groupsFill" size="sm" />
          <Text variant="caption" style={styles.counterText}>
            <Text variant="subtitle1">{usersCount}</Text>
            {t('general.total_people')}
          </Text>
        </View>
      )}
    </>
  );

  const getMoreUsers = useCallback(
    (page: number) => {
      const getMoreUsersAction = acknowledgedSearch
        ? getEmployeesToAcknowledgeList
        : getUsersList;
      dispatch(
        getMoreUsersAction({
          page,
        }),
      );
    },
    [acknowledgedSearch, dispatch],
  );

  useEffect(() => {
    const headerTitle = () => (
      <Typography weight="semiBold">{t('general.search')}</Typography>
    );
    navigation.setOptions({headerTitle});
  }, [navigation, t]);

  const {bottom: paddingBottom} = useSafeAreaInsets();

  return (
    <>
      <View
        style={[
          styles.commonPadding,
          {backgroundColor: theme.background.elements.default},
        ]}>
        <InputSearch
          value={value}
          onChangeText={setValue}
          placeholder={t('general.search_by_name')}
          variant="secondary"
        />
      </View>
      <UsersSectionList
        loading={initialLoading || loadingUsers}
        loadingMore={loadingMoreUsers}
        users={users}
        filteredUsers={filteredUsers}
        text={text}
        showCheckbox={selectUsers}
        isChecked={(item: User) =>
          selectedUsersProp?.some(user => user.id === item.id) ||
          selectedUsers.some((user: User) => user.id === item.id)
        }
        onPress={onHandleRedirect}
        usersList={!!usersList}
        getMoreUsers={getMoreUsers}
        firstHeaderComponent={firstHeaderComponent}
        secondHeaderComponent={secondHeaderComponent}
        contentContainerStyle={{paddingBottom}}
      />
    </>
  );
}

export default UsersListTab;