import React from 'react';
import type { ViewProps } from 'react-native';
import { useTheme } from '../../../theme';
import type { FABProps } from '../FAB';
import { StyledFAB, StyledFABPairWrapper } from './StyledFAB';

export type InnerFABProps = Pick<
  FABProps,
  'icon' | 'title' | 'onPress' | 'testID'
>;

export interface FABPairProps extends ViewProps {
  /**
   * Configuration for the main FAB.
   */
  fabConfig: InnerFABProps;
  /**
   * Callback to be called when the cancel FAB is pressed.
   */
  onCancel: () => void;
}

const Pair = ({ fabConfig, onCancel, ...props }: FABPairProps) => {
  const { icon, title, onPress, testID } = fabConfig;
  const theme = useTheme();

  return (
    <StyledFABPairWrapper {...props}>
      <StyledFAB
        icon="cancel"
        onPress={onCancel}
        testID="fab-pair-cancel"
        iconOnly
      />

      <StyledFAB
        icon={icon}
        title={title}
        onPress={onPress}
        testID={testID}
        iconOnly={!title}
        isLast
        titleStyle={{
          fontSize: theme.fontSizes.medium,
          fontFamily: theme.fonts.neutral.regular,
        }}
      />
    </StyledFABPairWrapper>
  );
};

export default Pair;