// @flow
import type { ThemeProps } from '../../../../types';
import type { SegmentedControlButtonProps } from './segmented-control-item.proptypes';
import { getPaletteColor } from '../../../../mixins/branding';
import {
  getFontFamily,
  getFontSize,
  getFontWeight,
} from '../../../../mixins/typography';
import { hoverBackgroundColor } from '../../../../mixins/focus';

type ControlProps = {| ...SegmentedControlButtonProps, ...ThemeProps |};

export const getLabelFontSize = ({ theme }: ControlProps) =>
  getFontSize({ theme, fontSize: 'f1' });

export const getLabelFontFamily = ({ theme }: ControlProps) =>
  getFontFamily({ theme });

export const getLabelFontWeight = () => getFontWeight({ bold: true });

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

export const getBackgroundColor = ({ selected, theme }: ControlProps) =>
  selected
    ? getPaletteColor('brand-secondary-fg')({ theme })
    : getPaletteColor('white')({ theme });

export const getColor = ({ selected, theme }: ControlProps) =>
  selected
    ? getPaletteColor('white')({ theme })
    : getPaletteColor('greyscale-dark')({ theme });

export const getBorderColor = ({ selected, theme }: ControlProps) =>
  selected
    ? getPaletteColor('brand-secondary-fg')({ theme })
    : getPaletteColor('greyscale-light')({ theme });

export const getButtonHoverColor = ({ selected, theme }: ControlProps) =>
  selected ? undefined : hoverBackgroundColor({ theme });

export const getButtonActiveColor = ({ selected, theme }: ControlProps) =>
  selected ? undefined : getPaletteColor('greyscale-light')({ theme });
