export type ResponsiveSize = 'mobile' | 'tablet' | 'desktop';

const breakpointOrder: ResponsiveSize[] = ['mobile', 'tablet', 'desktop'];

export function getResponsiveStyle(
  style: Record<string, Record<string, string>> = {},
  currentBreakpoint: ResponsiveSize,
  context?: 'slider-item'
): Record<string, string> {
  let result = style.default ? { ...style.default } : {};
  let largestDefinedBreakpoint: ResponsiveSize | undefined;

  for (let i = 0; i < breakpointOrder.length; i++) {
    const breakpoint = breakpointOrder[i];

    if (breakpoint === currentBreakpoint) break;
    if (style[breakpoint] && Object.keys(style[breakpoint]).length > 0) {
      largestDefinedBreakpoint = breakpoint;
      break;
    }
  }

  if (largestDefinedBreakpoint) {
    const styles = Object.entries(style[largestDefinedBreakpoint]).reduce(
      (acc, [key, value]) => {
        if (
          context === 'slider-item' &&
          key === 'display' &&
          value === 'none'
        ) {
          return acc;
        }
        acc[key] = value;
        return acc;
      },
      {} as Record<string, string>
    );

    result = {
      ...result,
      ...styles
    };
  }

  if (
    style[currentBreakpoint] &&
    Object.keys(style[currentBreakpoint]).length > 0
  ) {
    const styles = Object.entries(style[currentBreakpoint]).reduce(
      (acc, [key, value]) => {
        if (
          context === 'slider-item' &&
          key === 'display' &&
          value === 'none'
        ) {
          return acc;
        }
        acc[key] = value;
        return acc;
      },
      {} as Record<string, string>
    );

    result = {
      ...result,
      ...styles
    };
  }

  return result;
}