import { useMemo } from 'react';
import { createStyles } from '../utils';
import { useTheme } from './useTheme';
import { LLComponentStyleFn } from '../types';
import { useFonts } from './useFonts';

export type UseStylesArg<TStyles> = {
  componentStylesFn: LLComponentStyleFn<TStyles>;
  stylesProp?: Partial<TStyles>;
};

export function useStyles<TStyles>({
  componentStylesFn,
  stylesProp,
}: UseStylesArg<TStyles>): TStyles {
  const { theme } = useTheme();
  const { fonts } = useFonts();
  const componentStyles = useMemo(() => {
    return componentStylesFn({ theme, fonts });
  }, [theme, componentStylesFn]);

  return useMemo(
    () =>
      createStyles({
        componentStyles,
        stylesProp,
      }),
    [componentStyles, stylesProp]
  );
}