// @flow
import 'focus-visible/dist/focus-visible';
import type { ThemeProps } from '../../types';
import type { FocusStateOptions } from './focus.proptypes';
import { fadeColor } from '../../utils/color';
import { getPaletteColor } from '../branding';

/*
  We use a polyfill for the :focus-visible property to hide focus outlines. We remove the
  outline in the cases where the polyfill is loaded and focus-visible is not applied. The
  data attribute for focus visible is used as our style classes are overwritten. In the
  future this should be removed with just a :focused-visible css selector.
*/
export const FOCUS_VISIBLE_SELECTOR =
  '.js-focus-visible &[data-focus-visible-added]';

export const focusedBoxShadow = ({ theme }: ThemeProps) =>
  `0 1px 5px ${fadeColor(getPaletteColor('white')({ theme }), 0.9)}`;

export const darkModeBoxShadow = ({ theme }: ThemeProps) =>
  `0 0 0 2px ${getPaletteColor('white')({ theme })}`;

export const focusedBorderShadow = ({ inset = true }: { inset?: boolean }) =>
  `${inset ? 'inset' : ''} 0 0 0 2px`;

export const focusedBorderColor = ({ theme }: ThemeProps) =>
  getPaletteColor('greyscale-black')({ theme });

export const focusedBorderRadius = ({
  borderRadius = 0,
}: {
  borderRadius?: number,
}) => `${borderRadius}px`;

export const hoverBackgroundColor = ({ theme }: ThemeProps) =>
  fadeColor(getPaletteColor('greyscale-light')({ theme }), 0.75);

export const activeBackgroundColor = ({ theme }: ThemeProps) =>
  fadeColor(getPaletteColor('greyscale-light')({ theme }), 0.5);

export const focusedCircleRadius = '50%';
export const transitionInstant = '0s';
export const transitionFade = 'all 100ms linear';

export const getBaseFocusState = ({
  baseTransition = true,
  hoverTransition = true,
  activeTransition = true,
  pointerCursor = true,
}: FocusStateOptions) => `
  outline: none;
  box-shadow: initial;
  ${baseTransition ? `transition: ${transitionFade};` : ''}
  &:not([disabled]) {
    &:hover {
      ${pointerCursor ? 'cursor: pointer;' : ''}
      ${hoverTransition ? `transition: ${transitionInstant};` : ''}
    }
    &:active {
      ${activeTransition ? `transition: ${transitionInstant};` : ''}
    }
  }
  &[disabled] {
    cursor: default;
  }
`;
