import React, { forwardRef, HTMLAttributes } from 'react';
import { Box, LoadingIcon, Text, ThemeColorType } from '@nova-hf/ui';
import { TextVariantProps } from '@nova-hf/ui/umd/ts/src/text/Text.css';
import { textColorByBackgroundColor } from 'utils/helpers';

export type ButtonProps = {
  backgroundColor: ThemeColorType;
  textColor?: ThemeColorType;
  onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
  text: string;
  disabled?: boolean;
  loading?: boolean;
  textVariant: TextVariantProps;
  isDark?: boolean;
  borderColor?: ThemeColorType;
} & Omit<HTMLAttributes<HTMLButtonElement>, 'color'>;

const Button = forwardRef<HTMLElement, ButtonProps>(
  (
    {
      backgroundColor,
      text,
      textColor,
      onClick,
      disabled = false,
      loading = false,
      isDark,
      borderColor,
      textVariant = 'pSmallRegular',
      ...rest
    }: ButtonProps,
    ref,
  ) => {
    const useableTextColor = textColor || textColorByBackgroundColor(backgroundColor);
    return (
      <Box
        renderAs="button"
        display="flex"
        disabled={disabled}
        ref={ref}
        backgroundColor={!disabled ? backgroundColor : isDark ? 'grey900' : 'grey400'}
        justifyContent="center"
        paddingX={2}
        paddingY={2}
        onClick={onClick}
        cursor={!disabled ? 'pointer' : 'default'}
        style={{
          borderRadius: '16px',
        }}
        boxShadow={{ focus: 'focused' }}
        width="100%"
        borderColor={borderColor ?? backgroundColor}
        borderWidth={'2px'}
        borderStyle={borderColor ? 'solid' : 'none'}
        {...rest}
      >
        {loading ? (
          <LoadingIcon color={textColor} size={32} />
        ) : (
          <Text variant={textVariant} color={useableTextColor}>
            {text}
          </Text>
        )}
      </Box>
    );
  },
);

export default Button;