BrandingProvider

import React, { createContext } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { split, trimEnd, toNumber } from 'lodash';

import colors from 'res/colors';
import { selectors } from 'store/branding';
import { hexToHSL } from 'utils/helpers';

export const BrandingContext = createContext({});

export const BrandingProvider = ({ children }) => {
  const brandingColor = useSelector(selectors.getBrandColor);
  const brandingCardImage = useSelector(selectors.getBrandingCardImage);
  const haveBrandedCardImage = !!brandingCardImage;
  const brandingLogo = useSelector(selectors.getBrandingLogo);
  const brandingLogoImageType = useSelector(selectors.getLogoImageType);
  const brandingCardImageType = useSelector(selectors.getCardImageType);
  const brandingLoading = useSelector(selectors.getBrandingLoading);
  const isBrandedColor = !!brandingColor;

  const brandingHslColor = brandingColor && hexToHSL(brandingColor);
  const brandColorLuminosity = toNumber(trimEnd(split(brandingHslColor, ',')[2], '%)'));

  const brandingHighlightColor = brandColorLuminosity > 65 ? colors.dusk : colors.white;

  return (
    <BrandingContext.Provider
      value={{
        brandingCardImage,
        brandingCardImageType,
        brandingColor,
        brandingHighlightColor,
        brandingLoading,
        brandingLogo,
        brandingLogoImageType,
        haveBrandedCardImage,
        isBrandedColor,
      }}
    >
      {children}
    </BrandingContext.Provider>
  );
};

BrandingProvider.propTypes = {
  children: PropTypes.node,
};