import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Keyboard, View, StyleSheet } from 'react-native';
import ShareExtension from 'rn-extensions-share';

import SearchBox from '../../../containers/SearchBox';
import { CancelModalButton } from '../../../containers/HeaderButton';
import { themes } from '../../../constants/colors';

import sharedStyles from '../../Styles';
import { animateNextTransition } from '../../../utils/layoutAnimation';

const styles = StyleSheet.create({
	container: {
		flexDirection: 'row',
		...sharedStyles.separatorBottom
	}
});

const Header = React.memo(({
	searching, onChangeSearchText, initSearch, cancelSearch, theme
}) => {
	const [text, setText] = useState('');

	const onChangeText = (searchText) => {
		onChangeSearchText(searchText);
		setText(searchText);
	};

	const onCancelPress = () => {
		Keyboard.dismiss();
		onChangeText('');
		cancelSearch();
		animateNextTransition();
	};

	const onFocus = () => {
		initSearch();
		animateNextTransition();
	};

	return (
		<View
			style={[
				styles.container,
				{
					borderColor: themes[theme].separatorColor,
					backgroundColor: themes[theme].headerBackground
				}
			]}
		>
			{
				!searching
					? (
						<CancelModalButton
							onPress={ShareExtension.close}
							testID='share-extension-close'
						/>
					)
					: null
			}
			<SearchBox
				value={text}
				hasCancel={searching}
				onFocus={onFocus}
				onCancelPress={onCancelPress}
				onChangeText={onChangeText}
				testID='rooms-list-view-search'
				key='rooms-list-view-search'
			/>
		</View>
	);
});

Header.propTypes = {
	searching: PropTypes.bool,
	onChangeSearchText: PropTypes.func,
	initSearch: PropTypes.func,
	cancelSearch: PropTypes.func,
	theme: PropTypes.string
};

export default Header;