import { getInset } from 'react-native-safe-area-view';

import legacyVariables from './variables';

const bottomInset = getInset('bottom', undefined);

const WRAPPER_MARGIN_HORIZONTAL = 0.0;
const WRAPPER_NO_HOME_BAR_MARGIN_BOTTOM = 0.0;
const WRAPPER_NO_HOME_BAR_PADDING_BOTTOM = 0.0;
const WRAPPER_WITH_HOME_BAR_MARGIN_BOTTOM = 0.0;
const WRAPPER_WITH_HOME_BAR_PADDING_BOTTOM = bottomInset;
const TEXT_FONT_SIZE = legacyVariables.HEADER_4;
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 = 0.0;
const FILLED_TEXT_COLOR = legacyVariables.INVERTED_TEXT_COLOR;
const FILLED_BACKGROUND_COLOR = legacyVariables.PRIMARY_COLOR;
const DISABLED_TEXT_COLOR = legacyVariables.INVERTED_TEXT_COLOR;
const DISABLED_BACKGROUND_COLOR = legacyVariables.DISABLED_BACKGROUND_COLOR;

const getTextStyles = () => {
  const textStyles = {
    fontSize: TEXT_FONT_SIZE,
    lineHeight: TEXT_FONT_SIZE,
    color: FILLED_TEXT_COLOR,
  };

  if (legacyVariables.FONT_FAMILY !== undefined) {
    return { ...textStyles, fontFamily: legacyVariables.FONT_FAMILY };
  }

  return textStyles;
};

const bottomButtonStyles = {
  wrapper: {
    marginHorizontal: WRAPPER_MARGIN_HORIZONTAL,
    backgroundColor: FILLED_BACKGROUND_COLOR,
    borderRadius: BUTTON_BORDER_RADIUS,
  },
  wrapperWithoutHomeBar: {
    marginBottom: WRAPPER_NO_HOME_BAR_MARGIN_BOTTOM,
    paddingBottom: WRAPPER_NO_HOME_BAR_PADDING_BOTTOM,
  },
  wrapperWithHomeBar: {
    marginBottom: WRAPPER_WITH_HOME_BAR_MARGIN_BOTTOM,
    paddingBottom: WRAPPER_WITH_HOME_BAR_PADDING_BOTTOM,
  },
  button: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: BUTTON_HEIGHT,
    paddingHorizontal: BUTTON_PADDING_HORIZONTAL,
  },
  text: getTextStyles(),
  loadingIndicator: {
    color: FILLED_TEXT_COLOR,
  },
  disabledWrapper: {
    backgroundColor: DISABLED_BACKGROUND_COLOR,
  },
  disabledText: {
    color: DISABLED_TEXT_COLOR,
  },
} as const;

export default bottomButtonStyles;