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

const WRAPPER_BACKGROUND_COLOR = legacyVariables.GREY_5;
const ACTIONS_BORDER_COLOR = legacyVariables.BORDER_COLOR;
const ACTION_TEXT_FONT_SIZE = legacyVariables.HEADER_4;
const ACTION_TEXT_LINE_HEIGHT = legacyVariables.HEADER_5;
const ACTION_TEXT_COLOR = legacyVariables.LINK_TEXT_COLOR;
const ACTION_PADDING_VERTICAL = legacyVariables.MEDIUM_SIZE;
const ACTION_PADDING_HORIZONTAL = legacyVariables.MEDIUM_SIZE;
const ACTION_HEIGHT = ACTION_TEXT_LINE_HEIGHT + ACTION_PADDING_VERTICAL * 2.0;

const dateTimePickerStyles = {
  wrapper: {
    backgroundColor: WRAPPER_BACKGROUND_COLOR,
  },
  actions: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: ACTIONS_BORDER_COLOR,
  },
  action: {
    justifyContent: 'center',
    height: ACTION_HEIGHT,
    paddingHorizontal: ACTION_PADDING_HORIZONTAL,
  },
  /* DateTimePicker uses system font */
  actionText: {
    fontSize: ACTION_TEXT_FONT_SIZE,
    color: ACTION_TEXT_COLOR,
  },
} as const;

export default dateTimePickerStyles;