import { useContext, useEffect, useMemo } from 'react';
import { RtFrameLayers, RtTheme } from '../rt-frame.types';
import { FrameContext } from '@dpa/react-frame-context';

export function useFrame(
  props: RtFrameLayers,
  computedThemeMediaValue: Exclude<RtTheme, 'auto'>
) {
  const {
    achromatic,
    modifier,
    primitive,
    scheme,
    theme,
    use,
    typescale,
    typographyScheme,
    breakpointScheme,
    operatorScheme,
    sizeScheme,
  } = props;

  const propsAbstractions = useMemo<RtFrameLayers>(() => {
    const data = Object.fromEntries(
      Object.entries({
        achromatic,
        modifier,
        primitive,
        scheme,
        theme,
        use,
        typescale,
        typographyScheme,
        breakpointScheme,
        operatorScheme,
        sizeScheme,
      }).filter(([_, value]) => value !== undefined)
    );

    if (data.theme === 'auto') data.theme = computedThemeMediaValue;
    return data;
  }, [
    achromatic,
    modifier,
    use,
    primitive,
    scheme,
    theme,
    typescale,
    typographyScheme,
    breakpointScheme,
    operatorScheme,
    sizeScheme,
    computedThemeMediaValue,
  ]);

  const hasNewColors =
    !!achromatic || !!modifier || !!use || !!primitive || !!scheme || !!theme;
  const hasNewTypography =
    !!typescale ||
    !!typographyScheme ||
    !!operatorScheme ||
    !breakpointScheme ||
    !!sizeScheme;

  const parentAbstractions = useContext(FrameContext);

  const currentAbstractions = useMemo(
    () => ({
      ...parentAbstractions,
      ...propsAbstractions,
    }),
    [parentAbstractions, propsAbstractions]
  );

  return {
    propsAbstractions,
    parentAbstractions,
    hasNewColors,
    hasNewTypography,
    currentAbstractions,
  };
}