import React, {useCallback} from 'react';
import {Pressable, View} from 'react-native';
import {IconArrowLeft} from '@tabler/icons-react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {Divider, ListItem, ListItemProps} from '@components';
import {useGoBack} from '@hooks/useGoBack';
import GroupIcon, {GroupIconVariant} from '@modules/group/components/GroupIcon';
import {useGetGroupById} from '@modules/group/hooks/useGetGroupById';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props extends Omit<ListItemProps, 'title'> {
  showAvatar?: boolean;
  groupId: number;
  title: string;
}

function GroupInnerScreenHeader({
  groupId,
  showAvatar = true,
  title,
  ...props
}: Props) {
  const {top} = useSafeAreaInsets();
  const {theme} = useTheme();
  const group = useGetGroupById(groupId);
  const {goBack} = useGoBack();

  const Icon = useCallback(() => {
    if (!group.data?.icon) return null;
    return (
      <GroupIcon icon={group.data.icon} variant={GroupIconVariant.Header} />
    );
  }, [group.data?.icon]);

  if (!group.data) return null;
  return (
    <View>
      <View style={[styles.container, {paddingTop: top}]}>
        <Pressable onPress={goBack}>
          <IconArrowLeft color={theme.icon.neutral.default} />
        </Pressable>
        <View style={styles.listContainer}>
          <ListItem
            titleNumberOfLines={1}
            title={title}
            description={group.data?.title}
            avatar={
              showAvatar
                ? {
                    Icon,
                  }
                : undefined
            }
            onItemPress={goBack}
            style={styles.listItem}
            {...props}
          />
        </View>
      </View>
      <Divider />
    </View>
  );
}

export default GroupInnerScreenHeader;