import React from 'react';
import {
  GestureResponderEvent,
  StyleSheet,
  Text,
  TouchableOpacity,
  ViewProps,
  ViewStyle,
} from 'react-native';
import {normalize} 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 color = (() => {
    switch (props.color) {
      case 'purple':
        return '#8F01FF';
      case 'white':
      default:
        return 'white';
    }
  })();
  switch (props.mode) {
    case 'large':
      return (
        <TouchableOpacity
          onPress={props.onPress}
          style={[styles.normalButton, {backgroundColor: color}, props.style]}>
          <Text style={styles.normalLabel}>{props.title}</Text>
        </TouchableOpacity>
      );
    case 'normal':
    default:
      return (
        <TouchableOpacity
          onPress={props.onPress}
          style={[styles.normalButton, {backgroundColor: color}, 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,
    // marginBottom: '15%',
  },
  largeLabel: {
    fontSize: normalize(30),
    fontWeight: '500',
    color: '#ddd',
  },
  normalButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '70%',
    height: '10%',
    borderRadius: 5,
    // marginBottom: '15%',
  },
  normalLabel: {
    fontSize: normalize(24),
    fontWeight: '500',
    color: '#ddd',
  },
});

export default TaggSquareButton;