import React from 'react';
import {Pressable} from 'react-native';
import {IconUsersGroup} from '@tabler/icons-react-native';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {Typography, useNewPost} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import {NewPostScreens, NewPostStackParamList} from '../../navigation';
import {useGetSegmentationUsersCount} from '../../hooks/useGetSegmentationUsersCount';

function SegmentationIcon() {
  const {theme, iconSizes} = useTheme();
  const {segmentationItemIds} = useNewPost();
  const {navigate} =
    useNavigation<StackNavigationProp<NewPostStackParamList>>();
  const handleSegmentationPress = () => {
    navigate(NewPostScreens.SegmentationPost);
  };

  const allUsersCount = useGetSegmentationUsersCount({
    selectedSegmentationItemIds: segmentationItemIds,
  });

  return (
    <Pressable onPress={handleSegmentationPress} style={styles.scopeButton}>
      <IconUsersGroup color={theme.text.neutral.default} size={iconSizes.x6} />
      <Typography>{allUsersCount}</Typography>
    </Pressable>
  );
}

export default SegmentationIcon;
