import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconEdit, IconTrendingUp} from '@tabler/icons-react-native';
import {
  CardContainer,
  ListItem,
  Pill,
  ProgressBar,
  Typography,
} from '@components';
import {ActionTitle} from '@modules/goals/components';

import {styles} from './styles';

interface Props {
  userName: string;
  profilePicture?: Nullable<string>;
  onEditWeight?: () => void;
  isLoading: boolean;
  showButton: boolean;
  weightedProgress?: number;
  children?: React.ReactNode;
  goalCount?: number;
  publish?: boolean;
}
function ListHeader({
  userName,
  profilePicture,
  onEditWeight,
  isLoading,
  showButton,
  weightedProgress = 0,
  children,
  goalCount,
  publish,
}: Props) {
  const {t} = useTranslation();
  return (
    <View style={styles.listHeader}>
      <CardContainer>
        <ListItem
          title={userName}
          avatar={{
            url: profilePicture,
            name: userName,
            variant: 'primary',
          }}
          style={styles.withoutPadding}>
          <Pill
            text={t('goals.my_team.count_goals', {
              count: Number(goalCount),
            })}
            variant="highlight"
          />
        </ListItem>
      </CardContainer>
      <CardContainer style={styles.progressCard}>
        <ListItem
          title={t('goals.my_team.progress')}
          avatar={{Icon: IconTrendingUp, variant: 'primary'}}
          style={styles.withoutPadding}>
          <Typography
            variant="l"
            weight="semiBold">{`${weightedProgress}%`}</Typography>
        </ListItem>
        <ProgressBar progress={weightedProgress} />
      </CardContainer>
      {children}
      <ActionTitle
        title={t('screens.Goals')}
        buttonText={t(
          publish
            ? 'goals.my_team.edit_weight_approve'
            : 'goals.my_team.edit_weight',
        )}
        onPressButton={onEditWeight}
        IconButton={IconEdit}
        buttonDisabled={isLoading}
        showButton={showButton}
        style={styles.actionTitle}
      />
    </View>
  );
}

export default ListHeader;