import { useCallback } from 'react';
import { useGetBoneDimensions } from './useGetBoneDimensions';
import type {
  ICustomViewStyle,
  ISkeletonProps,
  IComponentSize,
} from '../constants';

type UseGetGradientSizeProps = Pick<ISkeletonProps, 'animationDirection'> & {
  boneLayout: ICustomViewStyle;
};

export const useGetGradientSize = (componentSize: IComponentSize) => {
  const getBoneDimensions = useGetBoneDimensions(componentSize);

  return useCallback(
    ({ animationDirection, boneLayout }: UseGetGradientSizeProps) => {
      const { width, height } = getBoneDimensions(boneLayout);
      const gradientStyle: ICustomViewStyle = {};

      if (
        animationDirection === 'diagonalDownRight' ||
        animationDirection === 'diagonalDownLeft' ||
        animationDirection === 'diagonalTopRight' ||
        animationDirection === 'diagonalTopLeft'
      ) {
        gradientStyle.width = width as number;
        gradientStyle.height = height as number;

        if (height >= width) {
          gradientStyle.height *= 1.5;
        } else {
          gradientStyle.width *= 1.5;
        }
      }

      return gradientStyle;
    },
    [getBoneDimensions],
  );
};