import React from 'react';
import { StyleSheet, View, TextStyle, TouchableHighlight } from 'react-native';
import Text from '../Text';
import { Colors, Buttons, Paddings, Shadows } from '../../styles';

export const styles = StyleSheet.create({
  container: {
    borderRadius: Buttons.BORDER_RADIUS,
    minWidth: Buttons.MIN_WIDTH,
    ...Shadows.MAIN_CONTAINER,
  },
  rectButton: {
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: Buttons.BORDER_RADIUS,
    height: Buttons.HEIGHT,
    paddingVertical: Paddings.MIN_Y * 3,
  },
});

interface Props {
  label: string;
  labelTextStyle?: TextStyle;
  backgroundColor?: string;
  underlayColor?: string;
  disabled?: boolean;
  onPress: () => void;
}

export default function StaticButton({
  label,
  labelTextStyle = {
    color: 'white',
    fontSize: Buttons.FONT_SIZE,
  },
  backgroundColor = Colors.BLUE.toString(),
  underlayColor = Colors.BLUE.lighten(-20),
  disabled,
  onPress,
}: Props) {
  return (
    <View style={[styles.container, { shadowColor: backgroundColor }]}>
      <TouchableHighlight
        style={[styles.rectButton, { backgroundColor }]}
        activeOpacity={1}
        underlayColor={underlayColor}
        onPress={onPress}
        disabled={disabled}>
        <View>
          <Text style={labelTextStyle}>{label}</Text>
        </View>
      </TouchableHighlight>
    </View>
  );
}