import type { NamedExoticComponent, ReactNode } from 'react';
import React, { memo } from 'react';
import classNames from 'classnames';

import type { SafeExtract, Size } from '../../types';
import { iconClassName } from '../Icon/iconClassName';
import type { IconName } from '../Icon/IconName';
import type { TooltipProps } from '../Tooltip/Tooltip';
import { Tooltip } from '../Tooltip/Tooltip';

export type RatingEnum = 'positive' | 'neutral' | 'negative';

export interface RatingsOverviewProps {
  /**
   * Sentiment of the rating
   */
  sentiment: RatingEnum;
  /**
   * Size of the icon
   * @default 'md'
   */
  size?: SafeExtract<Size, 'md' | 'lg'>;
  /**
   * Tooltip content
   * If provided, the icon will be wrapped in a button with a tooltip
   */
  tooltip?: ReactNode;
  /**
   * Tooltip placement
   * If provided, the tooltip placement will override the default
   */
  tooltipPlacement?: TooltipProps['placement'];
}

const icons: Record<RatingEnum, IconName> = {
  positive: 'shp-face-positive',
  neutral: 'shp-face-neutral',
  negative: 'shp-face-negative',
};

export const RatingsOverview: NamedExoticComponent<RatingsOverviewProps> = memo(function RatingsOverviewIcon({
  sentiment,
  size = 'md',
  tooltip,
  tooltipPlacement,
  ...rest
}: RatingsOverviewProps) {
  const Component = tooltip ? 'button' : 'span';

  const element = (
    <Component
      {...rest}
      className={classNames(
        'ratingsOverview',
        {
          'ratingsOverview--button': !!tooltip,
          'ratingsOverview--sentimentPositive': sentiment === 'positive',
          'ratingsOverview--sentimentNeutral': sentiment === 'neutral',
          'ratingsOverview--sentimentNegative': sentiment === 'negative',
        },
        iconClassName({ icon: icons[sentiment], size }).filter(className => className !== 'icon--default')
      )}
    />
  );

  if (tooltip) {
    return (
      <Tooltip content={tooltip} placement={tooltipPlacement}>
        {element}
      </Tooltip>
    );
  } else {
    return element;
  }
});