import React from 'react';
import { Normalize } from '../../utils/normalize';
import { Box } from '../Box';
import { ArrowButton } from '../ArrowButton';

type StepNavButtonProps = React.ComponentProps<typeof Box> & {
  label?: string;
  leftPress?: () => void;
  rightPress?: () => void;
  disabled?: boolean;
  loading?: boolean;
  variant?: 'primary' | 'outlined' | 'secondary';
};

/**
 * @label Right Button Label
 * @rightPress Called when the right button touch is released, but not if cancelled (optional)
 * @leftPress Called when the left button touch is released, but not if cancelled (optional)
 * @disabled Disables the right button (optional)
 * @loading Shows a loading spinner on the right button (optional)
 */
export const StepNavButton = ({
  label,
  leftPress,
  rightPress,
  disabled,
  loading,
  variant = 'primary',
  ...props
}: StepNavButtonProps) => (
  <Box
    borderRadius={Normalize(4)}
    width={'100%'}
    height={Normalize(48)}
    backgroundColor="white"
    flexDirection={'row'}
    alignItems={'center'}
    justifyContent={leftPress ? 'space-between' : 'flex-end'}
    paddingHorizontal={'spacing-s'}
    paddingVertical={'spacing-xs'}
    testID="StepNavButton"
    {...props}
  >
    {leftPress && (
      <ArrowButton onPress={leftPress} disabled={loading} pos="left" />
    )}
    {rightPress && (
      <ArrowButton
        onPress={rightPress}
        pos="right"
        label={label}
        disabled={disabled}
        loading={loading}
        variant={variant}
      />
    )}
  </Box>
);