import React from 'react';
import {Pressable, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconChevronDown} from '@tabler/icons-react-native';
import {Avatar, Typography} from '@components';
import {User} from '@interfaces/user';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface AssigneeButtonProps {
  assignee?: User;
  assigneeName: string;
  canAssignAgent: boolean;
  onPress: () => void;
}

export function AssigneeButton({
  assignee,
  assigneeName,
  canAssignAgent,
  onPress,
}: AssigneeButtonProps) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  return (
    <Pressable
      accessibilityLabel={t('service_management.change_agent')}
      onPress={onPress}
      disabled={!canAssignAgent}>
      <View style={styles.userRow}>
        {assignee && (
          <Avatar size="xs" url={assignee.profilePicture} name={assigneeName} />
        )}
        <Typography
          style={styles.assigneeText}
          variant="xs"
          ellipsizeMode="tail"
          numberOfLines={1}
          color={theme.text.neutral.default}
          {...(canAssignAgent && {
            weight: 'semiBold',
            color: theme.text.neutral.brand,
          })}>
          {assignee ? assigneeName : t('service_management.unassigned')}
        </Typography>
        {canAssignAgent && (
          <IconChevronDown
            size={iconSizes.x5}
            color={theme.text.neutral.brand}
          />
        )}
      </View>
    </Pressable>
  );
}