import type { ReactElement } from 'react';
import React from 'react';
import {
  StyledContainer,
  StyledBadge,
  StyledImage,
  StyledIcon,
  StyledBadgeIcon,
  StyledContent,
} from './StyledMapPin';
import type { IconName } from '../Icon';
import type { MapPinProps } from './types';
import MapPinFocussed from './Focussed';

const getBadgeIconName = (
  state: 'idle' | 'selected' | 'applied'
): IconName | undefined => {
  const iconMap: Record<'idle' | 'selected' | 'applied', IconName | undefined> =
    {
      idle: undefined,
      selected: 'checkmark',
      applied: 'mail-outlined',
    };
  return iconMap[state];
};

const MapPin = ({
  style,
  testID,
  state = 'idle',
  image,
  icon,
  ...nativeProps
}: MapPinProps): ReactElement => {
  const badgeIcon = getBadgeIconName(state);
  return (
    <StyledContainer {...nativeProps} style={style} testID={testID}>
      <StyledContent themeState={state}>
        {image && (
          <StyledImage
            testID={testID ? `${testID}-image` : undefined}
            {...image}
          />
        )}
        {icon && (
          <StyledIcon
            icon={icon}
            size="xsmall"
            testID={testID ? `${testID}-icon` : undefined}
          />
        )}
      </StyledContent>
      {badgeIcon && (
        <StyledBadge testID={testID ? `${testID}-badge` : undefined}>
          <StyledBadgeIcon icon={badgeIcon} size="xxxsmall" />
        </StyledBadge>
      )}
    </StyledContainer>
  );
};

export default Object.assign(MapPin, {
  Focussed: MapPinFocussed,
});