import {
  CSSProperties,
  ElementRef,
  ElementType,
  ForwardedRef,
  forwardRef,
  ReactNode,
  useMemo,
} from 'react';
import { useRtBaseProps } from '@dpa/react-hoc';
import { RtEffectProps } from './rt-effect.type';
import { propNumberToCss } from './utils/prop-number-to-css';
import { RtFrame } from '@dpa/react-frame-intro';

/**
 * Компонент для создания border, ring, ringInset.
 *
 * ring - это border, который реализован с помощью boxShadow
 *
 * Для создания border, нужно указать три пропса - border, borderWidth, borderStyle
 * Для создания ring, нужно указать три пропса - ring, ringWidth
 * Для создания ringInset, нужно указать три пропса - ringInset, ringInsetWidth
 *
 * Компонент поддерживает все прпосы RtFrame
 *
 */
export const RtEffect: <T extends ElementType = 'div'>(
  props: RtEffectProps<T> & { ref?: ForwardedRef<ElementRef<T>> }
) => ReactNode = forwardRef((props, ref) => {
  const {
    as: renderAs,
    children,
    border,
    borderWidth,
    borderStyle,
    ring,
    ringInset,
    ringInsetWidth,
    ringWidth,
    borderRadius,
    ...rest
  } = props;
  const baseProps = useRtBaseProps<HTMLDivElement>(props, '0.5.2');

  const Component = renderAs || 'div';

  const styles = useMemo(() => {
    const s: CSSProperties = { ...rest.style };

    let boxShadow = '';

    if (border) s.borderColor = `var(--v0-modifiers-foundation-${border})`;
    if (borderRadius) s.borderRadius = borderRadius;
    if (borderStyle && borderWidth) {
      s.borderStyle = borderStyle;
      s.borderWidth = propNumberToCss(borderWidth);
    }

    if (ringInset && ringInsetWidth) {
      boxShadow = `inset 0px 0px 0px ${ringInsetWidth} var(--v0-modifiers-foundation-${ringInset})`;
    }

    if (ring && ringWidth) {
      if (boxShadow) boxShadow += ', ';
      boxShadow += `0px 0px 0px ${ringWidth} var(--v0-modifiers-foundation-${ring})`;
    }

    s.boxShadow = boxShadow;

    return s;
  }, [
    border,
    borderStyle,
    borderWidth,
    ring,
    ringWidth,
    ringInset,
    ringInsetWidth,
    rest.style,
    borderRadius,
  ]);

  return (
    <RtFrame
      {...rest}
      {...baseProps}
      style={styles}
      ref={ref as ForwardedRef<HTMLDivElement>}
      as={Component}
    >
      {children}
    </RtFrame>
  );
});