import React, { useCallback, useEffect, useState } from 'react';
import { ActivityIndicator, StyleSheet, Text } from 'react-native';

import { themes } from '../../../constants/colors';
import { MessageTypeLoad } from '../../../constants/messageTypeLoad';
import { MessageType } from '../../../definitions';
import { useTheme } from '../../../theme';
import Touch from '../../../utils/touch';
import sharedStyles from '../../Styles';
import I18n from '../../../i18n';

const styles = StyleSheet.create({
	button: {
		paddingVertical: 16,
		alignItems: 'center',
		justifyContent: 'center'
	},
	text: {
		fontSize: 16,
		...sharedStyles.textMedium
	}
});

const LoadMore = ({
	load,
	type,
	runOnRender
}: {
	load: Function;
	type: MessageType;
	runOnRender: boolean;
}): React.ReactElement => {
	const { theme } = useTheme();
	const [loading, setLoading] = useState(false);

	const handleLoad = useCallback(async () => {
		try {
			if (loading) {
				return;
			}
			setLoading(true);
			await load();
		} finally {
			setLoading(false);
		}
	}, [loading]);

	useEffect(() => {
		if (runOnRender) {
			handleLoad();
		}
	}, []);

	let text = 'Load_More';
	if (type === MessageTypeLoad.NEXT_CHUNK) {
		text = 'Load_Newer';
	}
	if (type === MessageTypeLoad.PREVIOUS_CHUNK) {
		text = 'Load_Older';
	}

	return (
		<Touch onPress={handleLoad} style={styles.button} theme={theme} enabled={!loading}>
			{loading ? (
				<ActivityIndicator color={themes[theme].auxiliaryText} />
			) : (
				<Text style={[styles.text, { color: themes[theme].titleText }]}>{I18n.t(text)}</Text>
			)}
		</Touch>
	);
};

export default LoadMore;