// @flow
import { css } from 'styled-components';
import type { ThemeProps } from '../../../types';
import { getPaletteColor } from '../../../mixins/branding';
import {
  getFontSize,
  getFontFamily,
  getFontWeight,
} from '../../../mixins/typography';

export const getSelectionIndicatorShape = () => {
  return css`
    font-size: ${getFontSize};
    font-family: ${getFontFamily};
    font-weight: ${getFontWeight({ bold: true })};
    border-radius: 9999px;
    padding: 10px;
  `;
};

export const getForeground = ({
  selected = false,
  theme,
}: {|
  ...ThemeProps,
  selected?: boolean,
|}) => {
  return selected
    ? getPaletteColor('white')({ theme })
    : getPaletteColor('greyscale-black')({ theme });
};

const focusedCss = css`
  color: ${getPaletteColor('greyscale-black')};
  border: 1px solid ${getPaletteColor('greyscale-black')};
  background: transparent;
`;

export const getFocusedCss = ({ selected = false }: {| ...ThemeProps |}) => {
  if (selected) return '';
  return focusedCss;
};
