import React from 'react';
import {
  GestureResponderEvent,
  StyleSheet,
  Text,
  TouchableOpacity,
  ViewProps,
  ViewStyle,
} from 'react-native';
import {normalize, SCREEN_WIDTH} from '../../utils';

interface TaggSquareButtonProps extends ViewProps {
  onPress: (event: GestureResponderEvent) => void;
  title: string;
  mode: 'normal' | 'large';
  color: 'purple' | 'white';
  style?: ViewStyle;
}

const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
  const buttonStyles = (() => {
    switch (props.color) {
      case 'purple':
        return {backgroundColor: '#8F01FF'};
      case 'white':
      default:
        return {backgroundColor: 'white'};
    }
  })();
  switch (props.mode) {
    case 'large':
      return (
        <TouchableOpacity
          onPress={props.onPress}
          style={[styles.largeButton, buttonStyles, props.style]}>
          <Text style={styles.largeLabel}>{props.title}</Text>
        </TouchableOpacity>
      );
    case 'normal':
    default:
      return (
        <TouchableOpacity
          onPress={props.onPress}
          style={[styles.normalButton, buttonStyles, props.style]}>
          <Text style={styles.normalLabel}>{props.title}</Text>
        </TouchableOpacity>
      );
  }
};

const styles = StyleSheet.create({
  largeButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '70%',
    height: '10%',
    borderRadius: 5,
  },
  largeLabel: {
    fontSize: normalize(26),
    fontWeight: '500',
    color: '#eee',
  },
  normalButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.45,
    aspectRatio: 3.7,
    borderRadius: 5,
    marginBottom: '5%',
  },
  normalLabel: {
    fontSize: normalize(20),
    fontWeight: '500',
    color: '#78A0EF',
  },
});

export default TaggSquareButton;