import React, { CSSProperties, FC, ReactNode } from 'react';
import { Text, TouchableOpacity, ActivityIndicator } from 'react-native';

import { styles } from './styles';
import { ButtonVariants } from '../../types/components';

type Props = {
  children?: ReactNode;
  variant?: ButtonVariants;
  onPress?: () => void;
  containerStyles?: CSSProperties;
  textStyles?: CSSProperties;
  disabled?: boolean;
};

export const Button: FC<Props> = ({
  children,
  variant,
  onPress,
  containerStyles,
  textStyles,
  disabled
}) => {
  return (
    <>
      {variant === ButtonVariants.OPACITY ? (
        <OpacityButton
          onPress={onPress}
          children={children}
          containerStyles={containerStyles}
          textStyles={textStyles}
          disabled={disabled}
        />
      ) : variant === ButtonVariants.FILL ? (
        <FillButton
          onPress={onPress}
          children={children}
          containerStyles={containerStyles}
          textStyles={textStyles}
          disabled={disabled}
        />
      ) : variant == ButtonVariants.TEXT ? (
        <TextButton children={children} onPress={onPress} disabled={disabled} />
      ) : (
        <FillButton onPress={onPress} children={children} disabled={disabled} />
      )}
    </>
  );
};

type VariantProps = {
  children?: ReactNode;
  onPress?: () => void;
  containerStyles?: CSSProperties | {};
  textStyles?: CSSProperties | {};
  disabled?: boolean;
};

const OpacityButton: FC<VariantProps> = ({
  onPress,
  children,
  containerStyles = {},
  textStyles = {},
  disabled = false
}) => (
  <TouchableOpacity
    style={[styles.button, styles.opacityButton, containerStyles]}
    onPress={onPress}
    disabled={disabled}
  >
    <Text style={[styles.text, styles.opacityText, textStyles]}>{children}</Text>
  </TouchableOpacity>
);

const FillButton: FC<VariantProps> = ({
  onPress,
  children,
  containerStyles = {},
  textStyles = {},
  disabled = false
}) => (
  <TouchableOpacity
    style={[styles.button, styles.fillButton, containerStyles]}
    onPress={onPress}
    disabled={disabled}
  >
    {disabled ? (
      <ActivityIndicator animating={disabled} color={'#fff'} />
    ) : (
      <Text style={[styles.text, styles.fillText, textStyles]}>{children}</Text>
    )}
  </TouchableOpacity>
);

const TextButton: FC<VariantProps> = ({ onPress, children, disabled = false }) => (
  <TouchableOpacity style={styles.button} onPress={onPress} disabled={disabled}>
    <Text style={[styles.text, styles.textButtonText]}>{children}</Text>
  </TouchableOpacity>
);
