import { StyleSheet } from 'react-native';
import heroVariables from '../global';

const WRAPPER_BACKGROUND_COLOR = heroVariables.GREY_5;
const ACTIONS_BORDER_COLOR = heroVariables.BORDER_COLOR;
const ACTION_TEXT_FONT_SIZE = heroVariables.HEADER_4;
const ACTION_TEXT_LINE_HEIGHT = heroVariables.HEADER_5;
const ACTION_TEXT_COLOR = heroVariables.LINK_TEXT_COLOR;
const ACTION_PADDING_VERTICAL = heroVariables.MEDIUM_SIZE;
const ACTION_PADDING_HORIZONTAL = heroVariables.MEDIUM_SIZE;
const ACTION_HEIGHT = ACTION_TEXT_LINE_HEIGHT + ACTION_PADDING_VERTICAL * 2.0;
const OPTION_PADDING_VERTICAL = heroVariables.MEDIUM_SIZE;
const OPTION_PADDING_HORIZONTAL = heroVariables.MEDIUM_SIZE;
const OPTION_TEXT_FONT_SIZE = heroVariables.HEADER_4;
const OPTION_TEXT_COLOR = heroVariables.TEXT_COLOR;
const SELECTED_OPTION_TEXT_COLOR = heroVariables.PRIMARY_COLOR;

const selectStyles = {
  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,
  },
  /* Select uses system font */
  actionText: {
    fontSize: ACTION_TEXT_FONT_SIZE,
    color: ACTION_TEXT_COLOR,
  },
  overlay: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  dialog: {
    width: '80%',
    maxHeight: '70%',
    backgroundColor: heroVariables.WHITE,
    borderRadius: 2.0,
    elevation: 10.0,
  },
  optionWrapper: {
    paddingVertical: OPTION_PADDING_VERTICAL,
    paddingHorizontal: OPTION_PADDING_HORIZONTAL,
  },
  optionText: {
    fontSize: OPTION_TEXT_FONT_SIZE,
    color: OPTION_TEXT_COLOR,
  },
  selectedOptionText: {
    fontWeight: '400',
    color: SELECTED_OPTION_TEXT_COLOR,
  },
} as const;

export default selectStyles;