import React, {useMemo} from 'react';
import {Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {
  NewPostScreens,
  NewPostStackParamList,
  Pill,
  useNewPost,
} from '@components';

function SegmentationPill({disabled}: {disabled: boolean}) {
  const {t} = useTranslation();
  const {segmentationItemIds} = useNewPost();
  const {navigate} =
    useNavigation<StackNavigationProp<NewPostStackParamList>>();

  const onSegmentationPress = () => navigate(NewPostScreens.SegmentationPost);

  const segmentationPillItems = useMemo(
    () =>
      t(
        segmentationItemIds.length
          ? 'post.personalized'
          : 'post.all_the_company',
      ),
    [t, segmentationItemIds],
  );

  return (
    <Pressable disabled={disabled} onPress={onSegmentationPress}>
      <Pill text={segmentationPillItems} variant="info" />
    </Pressable>
  );
}

export default SegmentationPill;
