import React from 'react';
import {
  Text,
  TouchableOpacity as TouchableOpacityClass,
  View
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import styles from './Styles';
import { WithPreventDoubleClick } from './WithPreventDoubleClick';
import { Colors } from './../../theme';
import ShadowView from '../ShadowView';

const TouchableOpacity = WithPreventDoubleClick(TouchableOpacityClass);

export interface Props {
  onPress: any;
  style?: any;
  small?: any;
  medium?: any;
  long?: any;
  isTransparent?: any;
  isBlank?: any;
  titleColor?: any;
  titleStyle?: any;
  title: any;
  whiteButton?: any;
  hasShadow?: any;
  shadowRadius?: any;
  shadowColor?: any;
  shadowBorder?: any;
  shadowOpacity?: any;
  buttonColor?: any;
  buttonStyle?: any;
}

class Button extends React.PureComponent<Props> {
  render() {
    const {
      onPress,
      style,
      small,
      medium,
      long,
      isTransparent,
      isBlank,
      title,
      titleColor,
      titleStyle,
      whiteButton,
      hasShadow,
      shadowRadius,
      shadowColor,
      shadowBorder,
      shadowOpacity,
      buttonColor,
      buttonStyle
    } = this.props;
    if (hasShadow) {
      return (
        <ShadowView
          shadowBorder={shadowBorder}
          style={style}
          shadowColor={shadowColor}
          shadowOpacity={shadowOpacity}
          shadowRadius={shadowRadius}>
          <TouchableOpacity
            style={[
              styles.defaultBtn,
              long && styles.longBtn,
              medium && styles.mediumBtn,
              small && styles.smallBtn,
              isTransparent && styles.isTransparent,
              isBlank && styles.isBlank,
              whiteButton && styles.whiteButton,
              buttonColor && { backgroundColor: buttonColor },
              buttonStyle || {}
            ]}
            onPress={onPress}>
            {/* {!isTransparent && !whiteButton && (
              <LinearGradient
                colors={[Colors.theme, Colors.theme]}
                style={styles.gradientView}
              />
            )} */}
            <Text
              style={[
                styles.titleTxtWhite,
                isTransparent && styles.titleTxtBlack,
                titleColor && { color: titleColor },
                whiteButton && { color: Colors.black },
                titleStyle
              ]}>
              {title}
            </Text>
          </TouchableOpacity>
        </ShadowView>
      );
    } else {
      return (
        <TouchableOpacity
          style={[
            styles.defaultBtn,
            long && styles.longBtn,
            medium && styles.mediumBtn,
            small && styles.smallBtn,
            isTransparent && styles.isTransparent,
            isBlank && styles.isBlank,
            whiteButton && styles.whiteButton,
            style,
            buttonColor && { backgroundColor: buttonColor }
          ]}
          onPress={onPress}>
          {/* {!isTransparent && !whiteButton && (
            <LinearGradient
              colors={[Colors.theme, Colors.theme]}
              style={styles.gradientView}
            />
          )} */}
          <Text
            style={[
              styles.titleTxtWhite,
              isTransparent && styles.titleTxtBlack,
              titleColor && { color: titleColor },
              whiteButton && { color: Colors.black },
              titleStyle
            ]}>
            {title}
          </Text>
        </TouchableOpacity>
      );
    }
  }
}

export default Button;
