useTriColorLerp.ts

import { useCallback } from 'react';
import { WHITE_HEX_OPACITY_0 } from '@/constants/hexColors';
import {
  maxColorValSelector,
  minColorValSelector,
  neutralColorValSelector,
  overlayOpacitySelector,
  simpleColorValSelector,
} from '@/redux/configuration/configuration.selectors';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { getHexTricolorGradientColorWithAlpha } from '@/utils/convert/getHexTricolorGradientColorWithAlpha';
import { ONE } from '@/constants/common';
import { addAlphaToHexString } from '../utils/convert/addAlphaToHexString';

export type GetHex3ColorGradientColorWithAlpha = (position: number) => string;

type UseTriColorLerpReturn = {
  getHex3ColorGradientColorWithAlpha: GetHex3ColorGradientColorWithAlpha;
  defaultColorHex: string;
};

export const useTriColorLerp = (): UseTriColorLerpReturn => {
  const minColorValHexString = useAppSelector(minColorValSelector) || '';
  const maxColorValHexString = useAppSelector(maxColorValSelector) || '';
  const neutralColorValHexString = useAppSelector(neutralColorValSelector) || '';
  const overlayOpacityValue = useAppSelector(overlayOpacitySelector) || ONE;
  const simpleColorValue = useAppSelector(simpleColorValSelector) || WHITE_HEX_OPACITY_0;

  const getHex3ColorGradientColorWithAlpha = useCallback(
    (position: number) =>
      getHexTricolorGradientColorWithAlpha({
        leftColor: minColorValHexString,
        middleColor: neutralColorValHexString,
        rightColor: maxColorValHexString,
        position,
        alpha: Number(overlayOpacityValue),
      }),
    [minColorValHexString, neutralColorValHexString, maxColorValHexString, overlayOpacityValue],
  );

  const defaultColorHex = addAlphaToHexString(simpleColorValue, Number(overlayOpacityValue));

  return { getHex3ColorGradientColorWithAlpha, defaultColorHex };
};