import React from 'react';
import { TouchableOpacity } from 'react-native';
import { Normalize } from '../../utils/normalize';
import { Box } from '../Box';
import { Text } from '../Text';
import { useTheme } from '../../theme/ThemeProvider';

type OrderNowButtonProps = React.ComponentProps<typeof Box> & {
  label: string;
  value: string;
  onPress: () => void;
  disabled?: boolean;
};

/**
 * @label Button title
 * @value Button total
 * @onPress Called when the touch is released, but not if cancelled
 * @see https://zeroheight.com/502cb86ad/p/281e3e-buttons/t/943b4d
 */
export const OrderNowButton = ({
  label,
  value,
  onPress,
  disabled,
  ...props
}: OrderNowButtonProps) => {
  const { fonts } = useTheme();

  return (
    <TouchableOpacity
      onPress={onPress}
      disabled={disabled}
      testID="OrderNowButton"
    >
      <Box
        borderRadius={Normalize(4)}
        width={'100%'}
        height={Normalize(48)}
        backgroundColor={disabled ? 'gray100' : 'green'}
        flexDirection={'row'}
        alignItems={'center'}
        justifyContent={'space-between'}
        paddingHorizontal={'spacing-s'}
        paddingVertical={'spacing-xs'}
        {...props}
      >
        <Text
          color={'white'}
          variant={'body'}
          fontFamily={fonts.caustenRoundBold}
        >
          {label}
        </Text>
        <Box
          // eslint-disable-next-line react-native/no-inline-styles
          style={{ backgroundColor: 'rgba(43, 40, 69, 0.1)' }}
          borderRadius={Normalize(4)}
          justifyContent={'center'}
          alignItems={'center'}
          height={'100%'}
        >
          <Text
            marginHorizontal={'spacing-s'}
            color={'white'}
            variant={'body'}
            fontFamily={fonts.caustenRoundBold}
          >
            {value}
          </Text>
        </Box>
      </Box>
    </TouchableOpacity>
  );
};