import legacyVariables from './variables';

const TEXT_FONT_SIZE = legacyVariables.HEADER_4;
const WRAPPER_PADDING_VERTICAL = legacyVariables.MEDIUM_SIZE;
const WRAPPER_PADDING_HORIZONTAL = legacyVariables.MEDIUM_SIZE;
const WRAPPER_HEIGHT = TEXT_FONT_SIZE + WRAPPER_PADDING_VERTICAL * 2.0;
const WRAPPER_BORDER_RADIUS = WRAPPER_HEIGHT * 0.5;
const FILLED_TEXT_COLOR = legacyVariables.INVERTED_TEXT_COLOR;
const FILLED_BACKGROUND_COLOR = legacyVariables.PRIMARY_COLOR;
const OUTLINED_TEXT_COLOR = legacyVariables.PRIMARY_COLOR;
const OUTLINED_BORDER_COLOR = legacyVariables.PRIMARY_COLOR;
const DISABLED_TEXT_COLOR = legacyVariables.INVERTED_TEXT_COLOR;
const DISABLED_BACKGROUND_COLOR = legacyVariables.DISABLED_BACKGROUND_COLOR;

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

const buttonStyles = {
  wrapper: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: WRAPPER_HEIGHT,
    paddingHorizontal: WRAPPER_PADDING_HORIZONTAL,
    borderRadius: WRAPPER_BORDER_RADIUS,
  },
  text: {
    fontSize: TEXT_FONT_SIZE,
    lineHeight: TEXT_FONT_SIZE,
    ...fontStyle,
  },
  filledWrapper: {
    backgroundColor: FILLED_BACKGROUND_COLOR,
  },
  filledText: {
    color: FILLED_TEXT_COLOR,
  },
  filledLoadingIndicator: {
    color: FILLED_TEXT_COLOR,
  },
  outlinedWrapper: {
    borderWidth: 1.2,
    borderColor: OUTLINED_BORDER_COLOR,
    backgroundColor: 'transparent',
  },
  outlinedText: {
    fontWeight: '500',
    color: OUTLINED_TEXT_COLOR,
  },
  outlinedLoadingIndicator: {
    color: OUTLINED_TEXT_COLOR,
  },
  disabledWrapper: {
    borderWidth: 0.0,
    backgroundColor: DISABLED_BACKGROUND_COLOR,
  },
  disabledText: {
    color: DISABLED_TEXT_COLOR,
  },
} as const;

export default buttonStyles;