import React from 'react';
import {
  GestureResponderEvent,
  StyleSheet,
  Text,
  TouchableOpacity,
  ViewProps,
  ViewStyle,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {BACKGROUND_GRADIENT_MAP, TAGG_PURPLE} from '../../constants';
import {normalize, SCREEN_WIDTH} from '../../utils';

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

const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
  const buttonStyles = (() => {
    switch (props.color) {
      case 'purple':
        return {backgroundColor: TAGG_PURPLE};
      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 'gradient':
      return (
        <TouchableOpacity onPress={props.onPress}>
          <LinearGradient
            style={styles.gradientButton}
            colors={BACKGROUND_GRADIENT_MAP[0]}
            useAngle
            angle={90}>
            <Text style={styles.gradientLabel}>{props.title}</Text>
          </LinearGradient>
        </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',
  },
  gradientButton: {
    marginTop: '8%',
    borderRadius: 5,
    paddingVertical: '5%',
    aspectRatio: 3.3,
    elevation: 2,
    backgroundColor: '#2196F3',
  },
  gradientLabel: {
    color: 'white',
    fontWeight: '600',
    textAlign: 'center',
    fontSize: normalize(17),
  },
});

export default TaggSquareButton;