import React, {memo, useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {IconDotsVertical} from '@tabler/icons-react-native';
import {
  BadgeVariant,
  ListItem,
  ProgressBar,
  PressableCardContainer,
  Typography,
} from '@components';
import {formatNumber} from '@components/_HuGo/Inputs/utils';
import {Goal, GoalStatus, GoalUser} from '@modules/goals/interfaces';
import {getColorProgress} from '@modules/goals/utils';
import {getCompleteName, getFormattedDate} from '@shared/utils';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';

interface Props {
  goal: Goal;
  onMorePress: (goal: Goal) => void;
  withWeight?: boolean;
  goalUser?: GoalUser;
  weight?: number | string;
}

const DATE_FORMAT = 'dd/MM/yy';

function GoalItemComponent({
  goal,
  onMorePress,
  withWeight,
  goalUser,
  weight,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const navigation = useNavigation();
  const isDraft = goal.status === GoalStatus.DRAFT;

  const onPressItem = () =>
    navigation.navigate(isDraft ? Screens.EDIT_GOAL : Screens.GOAL_DETAIL, {
      id: goal.id,
      ...(isDraft ? {ownerUserId: goalUser?.userId} : {}),
    });

  const handleMorePress = () => onMorePress(goal);

  const badgeVariant = {
    [GoalStatus.CANCELLED]: {
      text: t('goals.status.cancelled'),
      variant: 'error' as BadgeVariant,
    },
    [GoalStatus.IN_PROGRESS]: {
      text: t('goals.status.in_progress'),
      variant: 'warning' as BadgeVariant,
    },
    [GoalStatus.FINISHED]: {
      text: t('goals.status.finished'),
      variant: 'success' as BadgeVariant,
    },
    [GoalStatus.DRAFT]: {
      text: t('goals.status.draft'),
      variant: 'info' as BadgeVariant,
    },
  };

  const description = useMemo(
    () =>
      t('goals.list.expiration', {
        date: getFormattedDate(goal.endDate, DATE_FORMAT).toUpperCase(),
      }) +
      ' • ' +
      t('goals.list.updated', {
        date: getFormattedDate(goal.updatedAt, DATE_FORMAT).toUpperCase(),
      }),
    [goal.endDate, goal.updatedAt, t],
  );

  const progressColor = useMemo(() => getColorProgress(goal), [goal]);

  const fullname = useMemo(() => getCompleteName(goalUser) || '', [goalUser]);

  return (
    <PressableCardContainer
      onPress={onPressItem}
      backgroundColor={theme.background.elements.default}
      style={styles.content}
      badge={badgeVariant[goal.status]}>
      <ListItem
        avatar={{
          url: goalUser?.profilePicture,
          name: fullname,
          size: 'sm',
        }}
        title={goal.title}
        topText={fullname}
        description={description}
        RightButton={IconDotsVertical}
        onPressRightButton={handleMorePress}
        style={styles.noPadding}>
        {withWeight && (
          <View>
            <Typography variant="xxs" color={theme.text.neutral.lighter}>
              {t('goals.my_team.weight')}
            </Typography>
            <Typography color={theme.text.neutral.default} weight="semiBold">
              {`${formatNumber(weight?.toString() || '0', true)}%`}
            </Typography>
          </View>
        )}
      </ListItem>
      <ProgressBar
        showPercentage
        progress={goal?.progress}
        color={progressColor}
      />
    </PressableCardContainer>
  );
}

export const GoalItem = memo(GoalItemComponent);