import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import {IconPlus, Icon as IconType} from '@tabler/icons-react-native';
import {Pressable} from '@components/_core/Pressable';
import {Typography, TypographyVariant} from '@components/_core/Typography';
import {ThemeAppearance, useTheme} from '@shared/theme';

import {ButtonSize} from '../../interfaces';
import {getColorsByVariant} from '../../utils';
import {styles} from './styles';

interface Props {
  text?: string;
  withIcon?: boolean;
  onPress?: () => void;
  size?: ButtonSize;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
  appearance?: ThemeAppearance;
  Icon?: IconType;
}

export function FABButton({
  text,
  onPress,
  disabled,
  style,
  appearance = 'auto',
  withIcon = true,
  size = 'lg',
  Icon = IconPlus,
}: Props) {
  const {iconSizes, theme} = useTheme();
  const {backgroundColor, textColor, underlayColor} = getColorsByVariant({
    variant: 'primary',
    disabled,
    appearance,
    theme,
  });
  const {
    textVariant,
    iconSize,
  }: {textVariant: TypographyVariant; iconSize: number} =
    size === 'lg'
      ? {textVariant: 'm', iconSize: iconSizes.x6}
      : {textVariant: 'xs', iconSize: iconSizes.x4};

  return (
    <Pressable
      onPress={onPress}
      backgroundColor={backgroundColor}
      underlayColor={underlayColor}
      disabled={disabled}
      style={[styles.container, styles[size], style]}>
      {!!text && (
        <Typography
          numberOfLines={1}
          variant={textVariant}
          weight="semiBold"
          color={textColor}
          style={styles.text}>
          {text}
        </Typography>
      )}
      {!!withIcon && <Icon size={iconSize} color={textColor} />}
    </Pressable>
  );
}
