import React, { useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import { BlockContext } from '@rocket.chat/ui-kit';

import { getAvatarURL } from '../../lib/methods/helpers/getAvatarUrl';
import I18n from '../../i18n';
import { MultiSelect } from '../../containers/UIKit/MultiSelect';
import styles from './styles';
import { IForwardMessageViewSelectRoom } from './interfaces';
import { ISearchLocal } from '../../definitions';
import { localSearchSubscription } from '../../lib/methods';
import { getRoomAvatar, getRoomTitle } from '../../lib/methods/helpers';
import { useTheme } from '../../theme';

const SelectPersonOrChannel = ({
	server,
	token,
	userId,
	onRoomSelect,
	blockUnauthenticatedAccess,
	serverVersion
}: IForwardMessageViewSelectRoom): React.ReactElement => {
	const [rooms, setRooms] = useState<ISearchLocal[]>([]);
	const { colors } = useTheme();

	const getRooms = async (keyword = '') => {
		try {
			const res = await localSearchSubscription({ text: keyword, filterMessagingAllowed: true });
			setRooms(res);
			return res.map(item => ({
				value: item.rid,
				text: { text: getRoomTitle(item) },
				imageUrl: getAvatar(item)
			}));
		} catch {
			// do nothing
		}
	};

	useEffect(() => {
		getRooms('');
	}, []);

	const getAvatar = (item: ISearchLocal) =>
		getAvatarURL({
			text: getRoomAvatar(item),
			type: item.t,
			userId,
			token,
			server,
			avatarETag: item.avatarETag,
			rid: item.rid,
			blockUnauthenticatedAccess,
			serverVersion
		});

	return (
		<View style={styles.inputContainer}>
			<Text style={[styles.label, { color: colors.bodyText }]}>{I18n.t('Person_or_channel')}</Text>
			<MultiSelect
				onSearch={getRooms}
				onChange={onRoomSelect}
				options={rooms.map(room => ({
					value: room.rid,
					text: { text: getRoomTitle(room) },
					imageUrl: getAvatar(room)
				}))}
				placeholder={{ text: `${I18n.t('Select')}` }}
				context={BlockContext.FORM}
				multiselect
			/>
		</View>
	);
};

export default SelectPersonOrChannel;