import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { StyleSheet } from 'react-native';
import { HeaderBackButton } from '@react-navigation/stack';

import { themes } from '../../constants/colors';
import Avatar from '../../containers/Avatar';

const styles = StyleSheet.create({
	avatar: {
		borderRadius: 10,
		marginHorizontal: 16
	}
});

const LeftButtons = React.memo(
	({ tmid, unreadsCount, navigation, baseUrl, userId, token, title, t, theme, goRoomActionsView, isMasterDetail }) => {
		if (!isMasterDetail || tmid) {
			const onPress = useCallback(() => navigation.goBack());
			const label = unreadsCount > 99 ? '+99' : unreadsCount || ' ';
			const labelLength = label.length ? label.length : 1;
			const marginLeft = -2 * labelLength;
			const fontSize = labelLength > 1 ? 14 : 17;
			return (
				<HeaderBackButton
					label={label}
					onPress={onPress}
					tintColor={themes[theme].headerTintColor}
					labelStyle={{ fontSize, marginLeft }}
				/>
			);
		}
		const onPress = useCallback(() => goRoomActionsView(), []);

		if (baseUrl && userId && token) {
			return <Avatar text={title} size={30} type={t} style={styles.avatar} onPress={onPress} />;
		}
		return null;
	}
);

LeftButtons.propTypes = {
	tmid: PropTypes.string,
	unreadsCount: PropTypes.number,
	navigation: PropTypes.object,
	baseUrl: PropTypes.string,
	userId: PropTypes.string,
	token: PropTypes.string,
	title: PropTypes.string,
	t: PropTypes.string,
	theme: PropTypes.string,
	goRoomActionsView: PropTypes.func,
	isMasterDetail: PropTypes.bool
};

export default LeftButtons;