import React, { CSSProperties, FC, ReactNode } from 'react';
import { Text, TouchableOpacity } 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}
        />
      ) : variant == ButtonVariants.TEXT ? (
        <TextButton children={children} onPress={onPress} />
      ) : (
        <FillButton onPress={onPress} children={children} />
      )}
    </>
  );
};

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 = {}
}) => (
  <TouchableOpacity style={[styles.button, styles.fillButton, containerStyles]} onPress={onPress}>
    <Text style={[styles.text, styles.fillText, textStyles]}>{children}</Text>
  </TouchableOpacity>
);

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