import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  ListRow,
  PressableCardContainer,
  Typography,
  ProgressBar,
} from '@components';
import {Goal} from '@modules/goals/interfaces';
import {usePermission} from '@redux/selectors';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  goal: Goal;
  onGoalPress?: (id: number) => void;
  canViewGoalsOfReviewed?: boolean;
}

export function GoalStepBody({
  goal,
  onGoalPress,
  canViewGoalsOfReviewed,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const canViewGoal = usePermission('VIEW_GOALS');

  const onPress = () => onGoalPress?.(goal.id!);
  const showGoalDetails = canViewGoal && !!canViewGoalsOfReviewed;

  return (
    <PressableCardContainer
      backgroundColor={theme.background.elements.default}
      onPress={onPress}
      disabled={!showGoalDetails}
      style={styles.container}>
      <ListRow disabled>
        <Typography
          variant="s"
          weight="semiBold"
          style={styles.title}
          numberOfLines={showGoalDetails ? 2 : undefined}>
          {goal.title}
        </Typography>
        <View style={styles.weightContainer}>
          <Typography variant="xxs" color={theme.text.neutral.lighter}>
            {t('goals.my_team.weight')}
          </Typography>
          <Typography weight="semiBold">{`${goal.weight}%`}</Typography>
        </View>
        {showGoalDetails && <ListRow.SideContent withRightIcon />}
      </ListRow>
      <ProgressBar progress={goal.progress || 0} showPercentage />
    </PressableCardContainer>
  );
}