import React, {useCallback} from 'react';
import {Pressable, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  IconArrowsRightLeft,
  IconChevronRight,
} from '@tabler/icons-react-native';
import {StackActions, useNavigation} from '@react-navigation/native';
import {Pill, Typography} from '@components';
import {Post} from '@modules/post/interfaces';
import {PostStreamStatus} from '@modules/livestream/interfaces';
import {getCompleteName, shortenText} from '@shared/utils';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';

const MAX_EXTERNAL_POST_TITLE_LENGTH = 22;
const MAX_POST_TITLE_LENGTH = 32;
const MAX_LIVESTREAM_POST_TITLE_LENGTH = 30;

export interface Props {
  post: Post;
}

export function PostTitle({post}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();
  const navigation = useNavigation();
  const name = post.user ? getCompleteName(post.user) : '';
  const postGroupTitle = post.group?.title;
  const isGroupPostInFeed = !!postGroupTitle;
  const isStreaming = post.stream?.status === PostStreamStatus.Live;
  const isStreamEnded = post.stream?.status === PostStreamStatus.Ended;
  const isStreamPost = post.stream;

  const onGroupTitlePress = useCallback(
    (gId: number) => () => {
      navigation.dispatch(
        StackActions.push(Screens.GROUP_DETAIL, {groupId: gId}),
      );
    },
    [navigation],
  );

  return (
    <View
      style={[
        styles.headerText,
        isGroupPostInFeed && !isStreamPost && styles.groupPostHeaderText,
        isStreamPost && styles.headerTextContainer,
      ]}>
      <Typography
        numberOfLines={isStreamPost ? 2 : 1}
        weight="semiBold"
        adjustsFontSizeToFit>
        {shortenText(
          name,
          post.isExternal
            ? MAX_EXTERNAL_POST_TITLE_LENGTH
            : isStreamPost
            ? MAX_LIVESTREAM_POST_TITLE_LENGTH
            : MAX_POST_TITLE_LENGTH,
        )}
        {isStreaming && (
          <Typography weight="semiBold">
            {isGroupPostInFeed
              ? ` ${t('livestream.is_streaming')} `
              : ` ${t('livestream.is_streaming_live')} `}
          </Typography>
        )}
        {isStreamEnded && (
          <Typography weight="semiBold">
            {` ${t('livestream.transmitted_live')} `}
          </Typography>
        )}
        {isStreamPost && isGroupPostInFeed && (
          <Typography
            weight="semiBold"
            onPress={onGroupTitlePress(post.group!.id!)}
            numberOfLines={1}
            adjustsFontSizeToFit>
            {shortenText(
              `${`${t('livestream.in')} `}${postGroupTitle}`,
              MAX_POST_TITLE_LENGTH / 2,
            )}
          </Typography>
        )}
      </Typography>
      {post.isExternal && (
        <Pill variant="neutral" size="sm" text={t('group.external')} />
      )}
      {isGroupPostInFeed && !isStreamPost && (
        <>
          <IconChevronRight
            size={iconSizes.x4}
            color={theme.text.neutral.lighter}
          />
          <Pressable onPress={onGroupTitlePress(post.group!.id!)}>
            <Typography
              weight="semiBold"
              numberOfLines={1}
              adjustsFontSizeToFit>
              {shortenText(postGroupTitle, MAX_POST_TITLE_LENGTH)}
            </Typography>
          </Pressable>
          {post.group!.isMultiCompany && (
            <IconArrowsRightLeft
              color={theme.text.neutral.default}
              size={iconSizes.x4}
            />
          )}
        </>
      )}
    </View>
  );
}
