// @flow
import { css } from 'styled-components';
import type { ThemeProps } from '../../../types';
import type { StackeeProps } from '../../../mixins/stackee';
import type { ButtonProps } from './button.proptypes';
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,
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
  getBaseFocusState,
} from '../../../mixins/focus';

export const getHeight = ({ size = 'md' }: ButtonProps) => {
  switch (size) {
    case 'sm':
      return '40px';
    case 'md':
      return '48px';
    default:
      return '48px';
  }
};

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

const getMinWidth = ({ shrink }: StackeeProps) =>
  shrink == null ? '160px' : undefined;

const getBackgroundColor = ({ disabled, isLoading }: ButtonProps) =>
  getPaletteColor(
    disabled && !isLoading ? 'greyscale-light' : 'brand-primary-fg',
  );

const getForegroundColor = ({ disabled, isLoading }: ButtonProps) =>
  getPaletteColor(disabled && !isLoading ? 'greyscale-black' : 'white');

const commonStyles = css`
  display: inline-block;
  min-width: ${getMinWidth};
  padding: 0 15px;
  background: ${getBackgroundColor};
  border-width: 0;
  border-radius: ${getBorderRadius};
  color: ${getForegroundColor};
  height: ${getHeight};
  font-family: ${getFontFamily};
  font-weight: ${getFontWeight};
  font-size: ${getFontSize};
  ${getBaseFocusState({})}

  ${FOCUS_VISIBLE_SELECTOR} {
    box-shadow: ${focusedBoxShadow},
      ${focusedBorderShadow} ${focusedBorderColor};
  }

  &&& {
    ${getSpacingRules}
  }
  ${getStackeeRules};
`;

export const commonButtonStyles = css`
  ${commonStyles}
  line-height: 100%;

  &:enabled:hover {
    background-color: ${getPaletteColor('brand-primary-fg-hover')};
  }

  &:enabled:active {
    background-color: ${getPaletteColor('brand-primary-fg')};
  }
`;

export const commonLinkStyles = css`
  ${commonStyles}
  line-height: ${getHeight};
  text-align: center;
  text-decoration: none;

  &:hover {
    background-color: ${getPaletteColor('brand-primary-fg-hover')};
  }

  &:active {
    background-color: ${getPaletteColor('brand-primary-fg')};
  }
`;
