// @flow
import Color from 'color';
import { css } from 'styled-components';
import { getPaletteColor } from '../../../mixins/branding';
import type { ButtonProps } from './button.proptypes';

/**
 * Custom override styling for the Invest primary button.
 */

// Design sanctioned non-palette colour for use with the Invest theme primary
// button only.
const INVEST_PRIMARY_BUTTON_CUSTOM_COLOR = '#fbc361';

const getBackground = ({ disabled, isLoading }: ButtonProps) =>
  disabled && !isLoading
    ? getPaletteColor('greyscale-light')
    : `linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), ${INVEST_PRIMARY_BUTTON_CUSTOM_COLOR}`;

const getHoverBackgroundColor = () =>
  `${new Color(INVEST_PRIMARY_BUTTON_CUSTOM_COLOR).lighten(0.1)}`;

const getActiveBackground = ({ disabled, isLoading }: ButtonProps) =>
  disabled && !isLoading
    ? getPaletteColor('greyscale-light')
    : INVEST_PRIMARY_BUTTON_CUSTOM_COLOR;

const investSpecificCommonStyles = css`
  color: ${getPaletteColor('greyscale-black')};
  background: ${getBackground};
  background-blend-mode: soft-light, normal;
`;

export const investSpecificButtonStyles = css`
  && {
    ${investSpecificCommonStyles}

    &:enabled:hover {
      background-color: ${getHoverBackgroundColor};
    }

    &:enabled:active {
      background: ${getActiveBackground};
    }
  }
`;

export const investSpecificLinkStyles = css`
  && {
    ${investSpecificCommonStyles}

    &:hover {
      background-color: ${getHoverBackgroundColor};
    }

    &:active {
      background: ${getActiveBackground};
    }
  }
`;
