// @flow
import type { StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import type { SelectorButtonProps } from './selector-button.proptypes';
import {
  getForegroundFont,
  getHoverBackgroundColor,
} from './selector-button.css-rules';
import { getPaletteColor } from '../../../../mixins/branding';
import { getFontSize } from '../../../../mixins/typography';
import {
  FOCUS_VISIBLE_SELECTOR,
  getBaseFocusState,
  focusedBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
} from '../../../../mixins/focus';

export const SelectorButton: StatelessFunctionalComponent<SelectorButtonProps> = styled.button.attrs(
  () => ({
    fontSize: 'f0',
  }),
)`
  && {
    background: ${getPaletteColor('white')};
    border: 0;
    color: ${getPaletteColor('brand-primary-fg')};
    font-family: ${getForegroundFont};
    font-size: ${getFontSize};
    margin: 0;
    padding: 15px;
    text-align: center;
    width: 100%;
    ${getBaseFocusState({ hoverTransition: false, activeTransition: false })}
  }
  ${FOCUS_VISIBLE_SELECTOR} {
    box-shadow: ${focusedBoxShadow},
      ${focusedBorderShadow} ${focusedBorderColor};
  }
  &:hover {
    color: ${getHoverBackgroundColor};
  }
  &:active {
    color: ${getPaletteColor('brand-primary-fg')};
  }
`;

SelectorButton.displayName = 'SelectorButton';
