import { RtTextProps } from './rt-text.types';
import {
  ElementRef,
  ElementType,
  ForwardedRef,
  forwardRef,
  ReactNode,
  useMemo,
} from 'react';
// eslint-disable-next-line @nx/enforce-module-boundaries
import { _V_PREFIX_ } from '../../../../../tools/constants';
import cn from 'classnames';
import { CSSProperties } from 'react';

/**
 * Необходимо использовать везде, где по дизайну мы видим текст, в сочетании с `<RtFrame surface="surface-name" />`.
 * Текст наследует свой цвет от поверхности на которой он расположен, поэтому указать цвет вручную нельзя.
 */
export const RtText: <T extends ElementType = 'p'>(
  props: RtTextProps<T> & { ref?: ForwardedRef<ElementRef<T>> }
) => ReactNode = forwardRef((props, ref) => {
  const {
    typography,
    specification = 'main',
    as: renderAs,
    children,
    className,
    lineClamp,
    style,
    ...rest
  } = props;
  const Component: ElementType = renderAs || 'p';

  const lineClampStyle: CSSProperties = useMemo(
    () => ({
      display: '-webkit-box',
      WebkitLineClamp: lineClamp,
      WebkitBoxOrient: 'vertical',
      overflow: 'hidden',
    }),
    [lineClamp]
  );

  return (
    <Component
      ref={ref}
      className={cn(
        `${_V_PREFIX_}-${typography}`,
        `${_V_PREFIX_}-text`,
        `${_V_PREFIX_}-text--color-${specification}`,
        className
      )}
      style={{
        ...style,
        ...(lineClamp ? lineClampStyle : {}),
      }}
      {...rest}
    >
      {children}
    </Component>
  );
});