import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import { View, Text, ViewStyle, TextStyle } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

export type IconProps = {
  name: string;
  color: string;
  size: number;
};

interface ButtonProps {
  onPress?: (param?: any) => void;
  disabled?: Boolean;
  variant?: 'outlined' | 'contained' | 'flat';
  title?: string;
  containerStyle?: ViewStyle;
  leftContainer?: ViewStyle;
  icon?: IconProps | string;
  color?: string;
}

const Button = (props: ButtonProps) => {
  const {
    onPress,
    title,
    containerStyle,
    disabled = false,
    variant = 'contained',
    leftContainer,
    icon,
    color,
  } = props;

  const contained = variant === 'contained';
  const outlined = variant === 'outlined';
  const flat = variant === 'flat';
  const primary = color ? color : '#E64769';
  const commonSts: ViewStyle = {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  };
  const outlinedSts: ViewStyle = {
    borderColor: disabled ? '#dedede' : primary,
    borderWidth: 1,
    borderRadius: 6,
    padding: 10,
  };
  const containedSts: ViewStyle = {
    backgroundColor: disabled ? '#dedede' : primary,
    borderRadius: 10,
    paddingVertical: 12,
  };

  const contentStyles: ViewStyle = {
    ...commonSts,
    ...(contained ? containedSts : outlined ? outlinedSts : {}),
  };

  const containerStyles: ViewStyle = {
    width: contained ? '65%' : '95%',
    alignSelf: 'center',
    ...containerStyle,
  };

  const iconProps: IconProps = {
    size: 24,
    color: contained ? '#fff' : primary,
    name: typeof icon === 'string' ? icon : '',
    ...(typeof icon !== 'string' ? icon : {}),
  };

  const iconStyles: ViewStyle = {
    position: 'absolute',
    left: '12%',
    ...leftContainer,
  };

  const textStyles: TextStyle = {
    fontSize: contained ? 20 : 18,
    fontWeight: contained || flat ? 'bold' : 'normal',
    fontFamily: 'Lato-Regular',
    ...(flat ? { letterSpacing: 1, textTransform: 'uppercase' } : {}),
    color: contained ? '#fff' : primary,
    textAlign: 'center',
  };

  return (
    <View style={containerStyles}>
      <TouchableOpacity onPress={onPress}>
        <View style={contentStyles}>
          {icon && (
            <View style={iconStyles}>
              <Icon {...iconProps} />
            </View>
          )}
          <Text style={textStyles}>{title}</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default Button;