import React, { forwardRef } from 'react';
import styles from './styles/rt-sticker.module.css';
import config from './styles/component-values-sticker.module.css';
import classnames from 'classnames/bind';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';
import { PlusTypographyIcon } from '@dpa/react-typography-icons';
import { RtStickerProps } from './rt-sticker.types';
import { isOverflow, isString, min } from './utils';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';

const cn = classnames.bind(styles);

export const RtSticker = forwardRef<
  HTMLElement,
  RtStickerProps & RtBaseProps<HTMLElement>
>((props, ref) => {
  const { ...baseProps } = useRtBaseProps(props, '0.2.2');
  const {
    count,
    showZero = false,
    overflowCount = 999,
    border,
    radius = 'primary',
    dot = false,
    leadingIcon: LeadingIcon = PlusTypographyIcon,
    reverseIcon = false,
    children = null,
    use = 'error',
    id,
    zIndex = 'auto',
    modifier,
  } = props;

  const additionalClassNames = {
    'rt-sticker__attach-to-top-right': Boolean(children),
    'rt-sticker__container-border': Boolean(border),
  };

  if (!count && !showZero) {
    return children;
  }
  return (
    <div className={cn('rt-sticker__wrapper')} style={{ zIndex }}>
      {children}
      <RtFrame
        isFontSizeProvider
        id={id}
        ref={ref}
        className={cn(
          'rt-sticker__container',
          `rt-sticker__container-${radius}-border-radius`,
          config['rt-sticker-sm'],
          additionalClassNames
        )}
        as="sup"
        title={`${count}`}
        surface="foundation-pure"
        use={use}
        modifier={modifier}
        {...baseProps}
      >
        {!dot && (
          <div
            className={cn('rt-sticker__content', {
              'rt-sticker__container--reversed': reverseIcon,
            })}
          >
            <bdi>
              <RtText
                typography="symbol-sm-secondary"
                className={cn('rt-sticker__count')}
              >
                {isString(count) ? count : min(count, overflowCount)}
              </RtText>
            </bdi>
            {!isString(count) &&
              isOverflow(count, overflowCount) &&
              LeadingIcon && (
                <LeadingIcon typography="symbol-sm-primary" scale="small" />
              )}
          </div>
        )}
      </RtFrame>
    </div>
  );
});

RtSticker.displayName = 'RtSticker';