import { useContext, useEffect, useState } from 'react';
import {
  RtBreakpointConfig,
  UseRtBreakpointReturnValue,
} from '../rt-frame.types';
import { BreakpointConfigContext } from '@dpa/react-frame-context';

export function useRtBreakpoint(): UseRtBreakpointReturnValue {
  const { config: breakpointConfig } = useContext<{
    config: RtBreakpointConfig;
    isRootAFontSizeProvider: boolean;
  }>(BreakpointConfigContext);
  const [breakpoint, setBreakpoint] = useState<UseRtBreakpointReturnValue>({
    xs: false,
    xsDefault: false,
    xsMax: false,
    xsMin: false,
    xsCustom: false,

    sm: false,
    smDefault: false,
    smMax: false,
    smMin: false,
    smCustom: false,

    md: false,
    mdDefault: false,
    mdMax: false,
    mdMin: false,
    mdCustom: false,

    lg: false,
    lgDefault: false,
    lgMax: false,
    lgMin: false,
    lgCustom: false,
  });

  useEffect(() => {
    function computeBreakpoint() {
      if (typeof window !== 'undefined') {
        Object.entries(breakpointConfig).forEach(([clusterName, cluster]) => {
          Object.entries(cluster).forEach(([segmentName, segment]) => {
            if (
              !!segment &&
              segment[0] <= window.innerWidth &&
              segment[1] >= window.innerWidth
            ) {
              setBreakpoint((b) => {
                const newSegmentName = `${clusterName}-${segmentName}`.replace(
                  /-([a-z])/g,
                  (_, char) => char.toUpperCase()
                );
                const newData = { ...b };
                Object.keys(b).forEach((name) => {
                  newData[name as keyof UseRtBreakpointReturnValue] = false;
                });
                newData[newSegmentName as keyof UseRtBreakpointReturnValue] =
                  true;
                newData[clusterName as keyof UseRtBreakpointReturnValue] = true;
                return newData;
              });
            }
          });
        });
      }
    }

    computeBreakpoint();
    window.addEventListener('resize', computeBreakpoint);

    return () => {
      window.removeEventListener('resize', computeBreakpoint);
    };
  }, [breakpointConfig]);

  return breakpoint;
}