import {
  IconCheck,
  IconClock,
  IconProgressX,
  IconX,
} from '@material-hu/icons/tabler';
import { Badge, Box } from '@material-hu/mui';
import { useTheme } from '@material-hu/mui/styles';

import HuAvatar from '@material-hu/components/design-system/Avatar';

import { getApprovalStateName } from 'src/pages/dashboard/serviceManagement/utils';
import {
  type ApprovalGroupTask,
  ApprovalStateName,
  type TaskEvent,
} from 'src/pages/dashboard/serviceManagement/types';

const ApprovalsAvatar = ({ task }: { task: ApprovalGroupTask | TaskEvent }) => {
  const theme = useTheme();
  const getBadgeProps = () => {
    const state = getApprovalStateName(task.state.name);
    switch (state) {
      case ApprovalStateName.APPROVED:
        return {
          backgroundColor: theme.palette.new.background.feedback.success,
          iconColor: theme.palette.new.icon.feedback.success,
          Icon: IconCheck,
        };
      case ApprovalStateName.REJECTED:
        return {
          backgroundColor: theme.palette.new.background.feedback.error,
          iconColor: theme.palette.new.icon.feedback.error,
          Icon: IconX,
        };
      case ApprovalStateName.PENDING:
        return {
          backgroundColor: theme.palette.new.background.feedback.highlight,
          iconColor: theme.palette.new.icon.feedback.highlight,
          Icon: IconClock,
        };
      default:
        return {
          backgroundColor: theme.palette.new.icon.neutral.disabled,
          iconColor: theme.palette.new.text.neutral.inverted,
          Icon: IconProgressX,
        };
    }
  };

  const badgeProps = getBadgeProps();

  if (!badgeProps) {
    return (
      <HuAvatar
        variant="circular"
        size="medium"
        src={task.assignee?.profilePicture}
      />
    );
  }

  return (
    <Badge
      overlap="circular"
      anchorOrigin={{
        horizontal: 'right',
        vertical: 'bottom',
      }}
      badgeContent={
        <Box
          sx={{
            width: 16,
            height: 16,
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: badgeProps.backgroundColor,
          }}
        >
          <badgeProps.Icon
            size={10}
            color={badgeProps.iconColor}
          />
        </Box>
      }
    >
      <HuAvatar
        variant="circular"
        size="medium"
        src={task.assignee?.profilePicture}
      />
    </Badge>
  );
};

export default ApprovalsAvatar;
