import { StyleSheet } from 'react-native';
import legacyVariables from './variables';

const TEXT_FONT_SIZE = legacyVariables.HEADER_4;
const BUTTON_MARGIN = legacyVariables.SMALL_SIZE;
const BUTTON_PADDING_VERTICAL = legacyVariables.MEDIUM_SIZE;
const BUTTON_PADDING_HORIZONTAL = legacyVariables.MEDIUM_SIZE;
const BUTTON_HEIGHT = TEXT_FONT_SIZE + BUTTON_PADDING_VERTICAL * 2.0;
const BUTTON_BORDER_RADIUS = legacyVariables.SMALL_SIZE;
const ACTIVE_TEXT_COLOR = legacyVariables.INVERTED_TEXT_COLOR;
const ACTIVE_BACKGROUND_COLOR = legacyVariables.DARK_PRIMARY_COLOR;
const ACTIVE_BORDER_COLOR = legacyVariables.DARK_PRIMARY_COLOR;
const INACTIVE_TEXT_COLOR = legacyVariables.MUTED_TEXT_COLOR;
const INACTIVE_BACKGROUND_COLOR = 'transparent';
const INACTIVE_BORDER_COLOR = legacyVariables.MUTED_TEXT_COLOR;

const fontStyles = legacyVariables.FONT_FAMILY !== undefined ? { fontFamily: legacyVariables.FONT_FAMILY } : {};

const buttonGroupStyles = {
  group: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    margin: -BUTTON_MARGIN,
  },
  wrapper: {
    display: 'flex',
    flexGrow: 1,
  },
  button: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: BUTTON_HEIGHT,
    minWidth: BUTTON_HEIGHT,
    margin: BUTTON_MARGIN,
    paddingHorizontal: BUTTON_PADDING_HORIZONTAL,
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: BUTTON_BORDER_RADIUS,
  },
  text: {
    fontSize: TEXT_FONT_SIZE,
    lineHeight: TEXT_FONT_SIZE,
    ...fontStyles,
  },
  activeButton: {
    borderColor: ACTIVE_BORDER_COLOR,
    backgroundColor: ACTIVE_BACKGROUND_COLOR,
  },
  activeText: {
    color: ACTIVE_TEXT_COLOR,
  },
  inactiveButton: {
    borderColor: INACTIVE_BORDER_COLOR,
    backgroundColor: INACTIVE_BACKGROUND_COLOR,
  },
  inactiveText: {
    color: INACTIVE_TEXT_COLOR,
  },
} as const;

export default buttonGroupStyles;