import React, {memo, useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {ListRow, PressableCardContainer} from '@components';
import {TYPE_SELECTION} from '@modules/performance/constants';
import {capitalize} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {VARIANT_BY_STATUS} from './constants';

interface Props {
  label: string;
  status: string;
  buttonLabel?: string;
  onPress: () => void;
  withAvatar?: boolean;
  image?: Nullable<string>;
  hasPendingReviews?: boolean;
  type?: string;
}

function ItemRow({
  label,
  status,
  buttonLabel,
  onPress,
  withAvatar,
  image,
  hasPendingReviews,
  type,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const values = VARIANT_BY_STATUS[status];

  const isPendingManage =
    status === 'PENDING_MANAGE' || type === TYPE_SELECTION;

  const translationKey = useMemo(
    () =>
      isPendingManage
        ? label
        : hasPendingReviews || status === 'SELECTION'
        ? values.CTALabel
        : 'performance.cycles.item_button.see_reviews',
    [hasPendingReviews, isPendingManage, label, status, values.CTALabel],
  );

  const ctaText = buttonLabel || t(translationKey);

  if (!values) {
    return null;
  }

  return (
    <PressableCardContainer
      onPress={onPress}
      backgroundColor={theme.background.elements.default}
      badge={{
        variant: values.variant,
        text: capitalize(t(values.label))!,
        hasIcon: true,
      }}>
      <ListRow disabled>
        {withAvatar && <ListRow.Avatar url={image} name={label} />}
        <ListRow.Title title={ctaText} topText={isPendingManage ? '' : label} />
        <ListRow.SideContent withRightIcon />
      </ListRow>
    </PressableCardContainer>
  );
}

export default memo(ItemRow);