import { SxProps } from '@mui/material';
import _ from 'lodash';
import { ComponentProps, useEffect, useState } from 'react';

type IUseSxOptions = {
  defaults?: boolean;
};

function useSx(props: ComponentProps<{ sx?: SxProps } & any>, sx: SxProps, options?: IUseSxOptions): SxProps {
  const _sx = _.chain(props?.sx ?? {})
    .cloneDeepWith((v) => (_.isFunction(v) ? v : undefined))
    .value();

  if (options?.defaults) {
    _.defaultsDeep(_sx, sx);
  } else {
    _.merge(_sx, sx);
  }

  const [value, setValue] = useState(_sx);

  useEffect(() => {
    if (!_.isEqual(value, _sx)) {
      setValue(_sx);
    }
  }, [value, _sx]);

  return value;
}

export { useSx };