import React from 'react';
import { FlatList, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
import { TSupportedThemes, useTheme } from '../../theme';
import { themes } from '../../lib/constants';
import { CustomIcon } from '../CustomIcon';
import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
import { addFrequentlyUsed } from '../../lib/methods';
import { useFrequentlyUsedEmoji } from '../../lib/hooks';
import CustomEmoji from '../EmojiPicker/CustomEmoji';
import sharedStyles from '../../views/Styles';
import { IEmoji, TAnyMessageModel } from '../../definitions';
import Touch from '../Touch';
export interface IHeader {
handleReaction: (emoji: IEmoji | null, message: TAnyMessageModel) => void;
message: TAnyMessageModel;
isMasterDetail: boolean;
}
type TOnReaction = ({ emoji }: { emoji?: IEmoji }) => void;
interface THeaderItem {
item: IEmoji;
onReaction: TOnReaction;
theme: TSupportedThemes;
}
interface THeaderFooter {
onReaction: TOnReaction;
theme: TSupportedThemes;
}
const ITEM_SIZE = 36;
const CONTAINER_MARGIN = 8;
const ITEM_MARGIN = 8;
const styles = StyleSheet.create({
container: {
alignItems: 'center',
marginHorizontal: CONTAINER_MARGIN
},
headerItem: {
height: ITEM_SIZE,
width: ITEM_SIZE,
borderRadius: ITEM_SIZE / 2,
marginHorizontal: ITEM_MARGIN,
justifyContent: 'center',
alignItems: 'center'
},
headerIcon: {
...sharedStyles.textAlignCenter,
fontSize: 20,
color: '#fff'
},
customEmoji: {
height: 20,
width: 20
}
});
const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => (
onReaction({ emoji: item })}
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
>
{typeof item === 'string' ? (
{shortnameToUnicode(`:${item}:`)}
) : (
)}
);
const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
onReaction(param)}
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
>
);
const Header = React.memo(({ handleReaction, message, isMasterDetail }: IHeader) => {
const { width } = useWindowDimensions();
const { theme } = useTheme();
const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji(true);
const size = (isMasterDetail ? width / 2 : width) - CONTAINER_MARGIN * 2;
const quantity = Math.trunc(size / (ITEM_SIZE + ITEM_MARGIN * 2) - 1);
const onReaction: TOnReaction = ({ emoji }) => {
handleReaction(emoji || null, message);
if (emoji) {
addFrequentlyUsed(emoji);
}
};
const renderItem = ({ item }: { item: IEmoji }) => ;
const renderFooter = () => ;
if (!loaded) {
return null;
}
return (
(typeof item === 'string' ? item : item.name)}
showsHorizontalScrollIndicator={false}
scrollEnabled={false}
horizontal
/>
);
});
export default Header;