import React, {useMemo} from 'react';
import {View} from 'react-native';
import {
  IconCheck,
  IconClock,
  IconProgressX,
  IconQuestionMark,
  IconX,
} from '@tabler/icons-react-native';
import {Avatar, AvatarProps} from '@components';
import {ApprovalGroupStatus} from '@modules/serviceManagement/interfaces';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface AvatarWithStatusProps extends AvatarProps {
  status: ApprovalGroupStatus;
}

function AvatarWithStatus({status, ...avatarProps}: AvatarWithStatusProps) {
  const {theme, iconSizes} = useTheme();

  const {Icon, backgroundColor} = useMemo(
    () =>
      ((
        {
          [ApprovalGroupStatus.Pending]: {
            Icon: IconClock,
            backgroundColor: theme.graphics.purple[600],
          },
          [ApprovalGroupStatus.Approved]: {
            Icon: IconCheck,
            backgroundColor: theme.graphics.success[600],
          },
          [ApprovalGroupStatus.Rejected]: {
            Icon: IconX,
            backgroundColor: theme.graphics.error[600],
          },
          [ApprovalGroupStatus.Cancelled]: {
            Icon: IconProgressX,
            backgroundColor: theme.background.elements.grey,
          },
        } as Record<
          ApprovalGroupStatus,
          {
            Icon: React.ElementType;
            backgroundColor: string;
          }
        >
      )[status] || {
        Icon: IconQuestionMark,
        backgroundColor: theme.background.elements.grey,
      }),
    [theme, status],
  );

  return (
    <View>
      <Avatar {...avatarProps} />
      <View style={[styles.iconContainer, {backgroundColor}]}>
        <Icon size={iconSizes.x3} color={theme.text.neutral.inverted} />
      </View>
    </View>
  );
}

export default AvatarWithStatus;