// @flow
import { css } from 'styled-components';

import type { ThemeProps } from '../../../types';
import type { UnstyledButtonProps } from './unstyled-button.proptypes';
import {
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
  getBaseFocusState,
  darkModeBoxShadow,
  FOCUS_VISIBLE_SELECTOR,
  focusedBorderRadius,
  type FocusProps,
} from '../../../mixins/focus';
import { getSpacingRules } from '../../../mixins/spacing';
import { getStackedRules } from '../../../mixins/stacking';
import { getStackeeRules } from '../../../mixins/stackee';

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 });

export const commonStyles = css`
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 1;
  text-align: inherit;
  border-radius: ${focusedBorderRadius};
  ${getFocusState}
  ${FOCUS_VISIBLE_SELECTOR} {
    box-shadow: ${getBoxShadow};
  }
  ${getSpacingRules};
  ${getStackedRules};
  ${getStackeeRules};
`;
