// @flow
import { css } from 'styled-components';
import type { ThemeProps } from '../../../types';
import { getPaletteColor } from '../../../mixins/branding';
import { getSpacingRules } from '../../../mixins/spacing';
import { getStackeeRules } from '../../../mixins/stackee';
import {
  getFontFamily,
  getFontWeight,
  getFontSize,
} from '../../../mixins/typography';
import {
  FOCUS_VISIBLE_SELECTOR,
  transitionInstant,
  getBaseFocusState,
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
  activeBackgroundColor,
  hoverBackgroundColor,
} from '../../../mixins/focus';
import type { SecondaryButtonProps } from './secondary-button.proptypes';

const getBorderRadius = ({ theme }: ThemeProps) => theme.buttonBorderRadius;

export const getHeight = ({
  size = 'md',
  theme,
}: {|
  ...SecondaryButtonProps,
  ...ThemeProps,
|}) => {
  switch (size) {
    case 'sm':
      return theme.buttonSizes?.height?.sm ?? '40px';
    case 'md': // intentional fall-through.
    default:
      return theme.buttonSizes?.height?.md ?? '48px';
  }
};

const getMinWidth = ({
  shrink,
  size = 'md',
  theme,
}: {|
  ...SecondaryButtonProps,
  ...ThemeProps,
|}) =>
  shrink == null ? theme.buttonSizes?.minWidth?.[size] ?? '160px' : undefined;

export const commonStyles = css`
  && {
    display: inline-block;
    height: ${getHeight};
    border-width: 0;
    padding: 0 20px;
    background: transparent;
    color: ${getPaletteColor('greyscale-dark')};
    min-width: ${getMinWidth};
    text-decoration: none;
    font-size: ${getFontSize};
    font-family: ${getFontFamily};
    font-weight: ${getFontWeight};
    border-radius: ${getBorderRadius};

    ${getBaseFocusState({ activeTransition: false })}
  }
  ${FOCUS_VISIBLE_SELECTOR} {
    transition: ${transitionInstant};
    box-shadow: ${focusedBoxShadow},
      ${focusedBorderShadow} ${focusedBorderColor};
  }

  &[disabled] {
    &:hover {
      cursor: default;
      background-color: transparent;
    }
    color: ${getPaletteColor('greyscale-medium')};
  }
`;

export const buttonStyles = css`
  line-height: 100%;
  &&& {
    ${getSpacingRules}
  }
  ${getStackeeRules};

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

  &:enabled:active {
    background-color: ${activeBackgroundColor};
  }
`;

export const linkStyles = css`
  line-height: ${getHeight};
  text-align: center;
  text-decoration: none;
  &&& {
    ${getSpacingRules}
  }
  ${getStackeeRules};

  &:hover {
    background-color: ${hoverBackgroundColor};
  }
  &:active {
    background-color: ${activeBackgroundColor};
  }
`;
