import cn from 'classnames';
import {
  RtBreakpointSegmentsProps,
  RtFrameProps,
  RtFrameRootProps,
} from './rt-frame.types';
import {
  ElementRef,
  ElementType,
  ForwardedRef,
  forwardRef,
  ReactNode,
  useContext,
  useEffect,
} from 'react';
import { handleRootAbstractions } from './utils/handle-root-abstractions';
import {
  ColorClassKeys,
  getColorClasses,
  getTypographyClasses,
  TypographyClassKeys,
} from './utils/get-frame-classes';
import { useComputedMediaTheme } from './hooks/use-computed-media-theme';
import { useFrame } from './hooks/use-frame';
import {
  FrameContext,
  SurfaceContext,
  BreakpointConfigContext,
  BreakpointClusterContext,
} from '@dpa/react-frame-context';
// eslint-disable-next-line @nx/enforce-module-boundaries
import { _V_PREFIX_ } from '../../../../../tools/constants';
import {
  RtFrameRootStyled,
  StyledProps,
} from './styled-components/rt-frame-styled';
import { useBreakpoint } from './hooks/use-breakpoint';

const RtInternalCompoundedFrame: <T extends ElementType = 'div'>(
  props: RtFrameProps<T> & { ref?: ForwardedRef<ElementRef<T>> }
) => ReactNode = forwardRef((props, ref) => {
  const {
    children,
    as: renderAs,
    surface,
    surfaceState = 'native',
    className,
    bgTransparent,

    achromatic,
    primitive,
    theme,
    scheme,
    modifier,
    use,

    sizeScheme,
    typescale,
    typographyScheme,
    operatorScheme,
    breakpointScheme,

    breakpointXs,
    breakpointSm,
    breakpointMd,
    breakpointLg,

    isFontSizeProvider = false,
    borderColorSurfaceUse,

    ...rest
  } = props;

  const { computedThemeMediaValue } = useComputedMediaTheme();

  const {
    isStyledComponent,
    breakpointConfig,
    hasNewBreakpoints,
    isRootAFontSizeProvider,
    Component,
  } = useBreakpoint({
    breakpointXs,
    breakpointSm,
    breakpointMd,
    breakpointLg,
    as: renderAs,
    isFontSizeProvider,
  });

  const {
    propsAbstractions,
    parentAbstractions,
    currentAbstractions,
    hasNewTypography,
    hasNewColors,
  } = useFrame(props, computedThemeMediaValue);

  useEffect(() => {
    if (Object.values(parentAbstractions).length === 0) {
      console.warn('RtFrame: There must be an root <RtFrame.Root /> element.');
    }
  }, [currentAbstractions, parentAbstractions]);

  const parentSurface = useContext(SurfaceContext);

  const breakpointClustersContext = useContext<RtBreakpointSegmentsProps>(
    BreakpointClusterContext
  );

  const Content = (
    <Component
      styled={
        isStyledComponent
          ? ({
              breakpointConfig,
              breakpointScheme: currentAbstractions.breakpointScheme,
              isFontSizeProvider: isRootAFontSizeProvider
                ? true
                : isFontSizeProvider,
              breakpointClustersProps: {
                breakpointXs,
                breakpointSm,
                breakpointMd,
                breakpointLg,
              },
              breakpointClustersContext: breakpointClustersContext,
            } as StyledProps['styled'])
          : undefined
      }
      ref={ref}
      className={cn(
        {
          [`${_V_PREFIX_}-surface--${surface}`]: !!surface,
          [getTypographyClasses(propsAbstractions)]: hasNewTypography,
          [getColorClasses(currentAbstractions, propsAbstractions)]:
            hasNewColors,
          [`${_V_PREFIX_}-surface`]: !!surface,
          [`${_V_PREFIX_}-surface-children`]:
            hasNewColors &&
            !!parentSurface &&
            !parentSurface.includes('foundation') &&
            !surface,
          [`${_V_PREFIX_}-surface--transparent`]: !!bgTransparent,
        },
        className
      )}
      data-surface-state={surfaceState}
      style={
        borderColorSurfaceUse && {
          borderColor: `var(--v0-modifiers-foundation-${borderColorSurfaceUse})`,
        }
      }
      as={isStyledComponent ? renderAs : undefined}
      {...rest}
    >
      {children}
    </Component>
  );

  const SurfaceContextAndContent = surface ? (
    <SurfaceContext.Provider value={surface}>{Content}</SurfaceContext.Provider>
  ) : (
    Content
  );

  const FrameContextAndContent =
    hasNewTypography || hasNewColors ? (
      <FrameContext.Provider value={currentAbstractions}>
        {SurfaceContextAndContent}
      </FrameContext.Provider>
    ) : (
      SurfaceContextAndContent
    );

  const BreakpointClusterContextAndContent = hasNewBreakpoints ? (
    <BreakpointClusterContext.Provider
      value={{ breakpointXs, breakpointSm, breakpointMd, breakpointLg }}
    >
      {FrameContextAndContent}
    </BreakpointClusterContext.Provider>
  ) : (
    FrameContextAndContent
  );

  return BreakpointClusterContextAndContent;
});

/**
 * Рутовый фрейм, который определяет дефолтные абстракции дизайн системы Ritm на `body`.
 *
 * Должен быть в каждом приложении.
 */
function RtFrameRoot(props: RtFrameRootProps) {
  const { children, breakpointConfig, isFontSizeProvider = false } = props;
  const { computedThemeMediaValue } = useComputedMediaTheme();
  const { currentAbstractions } = useFrame(props, computedThemeMediaValue);

  useEffect(() => {
    if (typeof document !== 'undefined') {
      handleRootAbstractions(ColorClassKeys, currentAbstractions);
      handleRootAbstractions(TypographyClassKeys, currentAbstractions);
    }
  }, [currentAbstractions]);

  return (
    <BreakpointConfigContext.Provider
      value={{
        config: breakpointConfig,
        isRootAFontSizeProvider: isFontSizeProvider,
      }}
    >
      <RtFrameRootStyled
        styled={{
          breakpointScheme: currentAbstractions.breakpointScheme,
          breakpointConfig: breakpointConfig,
          breakpointClustersContext: {},
          breakpointClustersProps: {},
          isFontSizeProvider,
        }}
      />
      <FrameContext.Provider value={currentAbstractions}>
        {children}
      </FrameContext.Provider>
    </BreakpointConfigContext.Provider>
  );
}

type CompoundedComponent = typeof RtInternalCompoundedFrame & {
  Root: typeof RtFrameRoot;
  displayName?: string;
};

/**
 * Компонент для переопределения дефолтных абстракции дизайн системы Ritm.
 * Также используется при верстке для декларации поверхностей, для установки цвета текста и фона на поверхности.
 *
 * Приложение обязательно должно иметь корневой <RtFrame.Root /> с установленными дефолтными абстракциями на приложении.
 *
 * {@link RtFrameProps}
 */
const RtFrame = RtInternalCompoundedFrame as CompoundedComponent;

RtFrame.Root = RtFrameRoot;
RtFrame.displayName = 'RtFrame';

export { RtFrame, RtFrameRoot };