// @flow
import type { ThemeProps } from '../../../types';
import type { UnstyledButtonProps } from './unstyled-button.proptypes';
import {
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
  getBaseFocusState,
  darkModeBoxShadow,
  type FocusProps,
} from '../../../mixins/focus';

type BoxShadowProps = {|
  ...UnstyledButtonProps,
  ...ThemeProps,
  ...FocusProps,
|};

export const getBoxShadow = (props: BoxShadowProps) => {
  const themeProps = { theme: props.theme };

  if (props.isDarkMode) {
    return `${darkModeBoxShadow(themeProps)}`;
  }

  // eslint-disable-next-line no-extra-boolean-cast
  if (!!props.insetFocus) {
    return `${focusedBoxShadow(themeProps)}, ${focusedBorderShadow({
      inset: true,
    })} ${focusedBorderColor(themeProps)}`;
  }

  return `${focusedBorderShadow({ inset: false })} ${focusedBorderColor(
    themeProps,
  )}, ${focusedBoxShadow(themeProps)}`;
};

export const getFocusState = ({ hasTransition = true }: UnstyledButtonProps) =>
  hasTransition
    ? getBaseFocusState({})
    : getBaseFocusState({ baseTransition: false, hoverTransition: false });
