import {
  RtBreakpointConfig,
  RtBreakpointScheme,
  RtBreakpointSegmentsProps,
  RtFrameProps,
} from '../rt-frame.types';
import { createGlobalStyle, styled } from 'styled-components';
import { RtBreakpointClusterSegment, RtBreakpoint } from '../rt-frame.types';
import { breakpointSchemes } from '../constants/breakpoint-scheme';
// eslint-disable-next-line @nx/enforce-module-boundaries
import { _FRAME_MAJOR_VERSION_ } from '../../../../../../tools/constants/index';

export type StyledProps = Record<string, any> & {
  styled: {
    breakpointScheme: RtBreakpointScheme;
    breakpointConfig: RtBreakpointConfig;
    isFontSizeProvider: RtFrameProps<any>['isFontSizeProvider'];
    breakpointClustersProps: RtBreakpointSegmentsProps;
    breakpointClustersContext: RtBreakpointSegmentsProps;
  };
};

const getDynamicStyles = ({ styled: props }: StyledProps) => {
  return Object.entries(props.breakpointConfig)
    .map(([breakpoint, cluster]) => {
      return Object.entries(cluster)
        .map(([segmentName, segment]) => {
          if (!segment) return '';

          const breakpointPropKey =
            `breakpoint${breakpoint[0].toLocaleUpperCase()}${breakpoint.substring(
              1
            )}` as keyof RtBreakpointSegmentsProps;

          let breakpointKey: RtBreakpoint = breakpoint as RtBreakpoint;
          let segmentKey: RtBreakpointClusterSegment =
            segmentName as RtBreakpointClusterSegment;

          const currentBreakpoint =
            props.breakpointClustersProps[breakpointPropKey] ||
            props.breakpointClustersContext[breakpointPropKey];

          if (currentBreakpoint) {
            if (typeof currentBreakpoint === 'object') {
              const [bp, _segment] = currentBreakpoint[segmentKey].split('-');
              breakpointKey = bp as RtBreakpoint;
              segmentKey = _segment as RtBreakpointClusterSegment;
            } else if (typeof currentBreakpoint === 'string')
              breakpointKey = currentBreakpoint;
          }

          const coefficient =
            breakpointSchemes[props.breakpointScheme][breakpointKey][
              segmentKey
            ];
          return `
        @media (min-width: ${segment[0]}px) and (max-width: ${segment[1]}px) {
          ${props.isFontSizeProvider ? `font-size: ${coefficient}px;` : ''}
          --v${_FRAME_MAJOR_VERSION_}-breakpoint-coefficient: ${coefficient};
        }
      `;
        })
        .join('\n');
    })
    .join('\n');
};

export const RtFrameRootStyled = createGlobalStyle`
body {
  ${getDynamicStyles}
}
`;

export const RtFrameStyled = styled.div.withConfig({
  shouldForwardProp: (prop) => {
    return prop !== 'styled';
  },
})<StyledProps>`
  ${getDynamicStyles}
`;