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;