import React, {FC, ReactNode} from 'react';
import {TouchableOpacityProps, TextStyle} from 'react-native';
import Loader from 'react-native-three-dots-loader';
import {StyledButton, Label} from '@styles/components/button';
import THEME from '@styles/theme';

export interface IProps extends TouchableOpacityProps {
  title?: string;
  disabled?: boolean;
  variant?: 'contained' | 'text';
  labelNode?: ReactNode;
  labelStyles?: TextStyle;
  showLoader?: boolean;
}

const Field: FC<IProps> = ({
  title,
  labelNode,
  labelStyles,
  showLoader,
  ...rest
}) => (
  <StyledButton disabled={rest?.disabled} {...rest}>
    {labelNode ? (
      labelNode
    ) : (
      <Label variant={rest?.variant} style={labelStyles}>
        {title}
        {showLoader && (
          <Loader
            background={`${THEME?.INFO?.MAIN}`}
            activeBackground={`${THEME?.INFO?.MAIN}`}
            dotMargin={3}
          />
        )}
      </Label>
    )}
  </StyledButton>
);

Field.defaultProps = {
  variant: 'contained',
};

export default Field;