// Copyright © 2022 Olo Inc. All rights reserved.
// This software is made available under the Olo Pay SDK License (See LICENSE.md file)

import {
  HostComponent,
  NativeSyntheticEvent,
  Platform,
  requireNativeComponent,
  StyleSheet,
} from 'react-native';
import type { DigitalWalletButtonNativeProps } from './definitions/DigitalWalletButtonNativeTypes';
import React, { useCallback } from 'react';
import type { DigitalWalletButtonProps } from '../definitions';

const NativeButton: HostComponent<DigitalWalletButtonNativeProps> =
  requireNativeComponent('DigitalWalletButton');

export const DigitalWalletButton: React.FC<DigitalWalletButtonProps> = ({
  onPress,
  disabled,
  applePayConfig,
  googlePayConfig,
  styles,
  ...props
}) => {
  const onPressEventHandler = useCallback(
    (_: NativeSyntheticEvent<undefined>) => {
      onPress?.();
    },
    [onPress]
  );

  return (
    <NativeButton
      style={[defaultStyles.nativeCard, styles]}
      onClickedEvent={onPressEventHandler}
      googlePayConfig={googlePayConfig}
      applePayConfig={applePayConfig}
      isEnabled={!disabled}
      {...props}
    />
  );
};

const defaultStyles = StyleSheet.create({
  nativeCard: {
    minWidth: 80,
    ...Platform.select({
      android: {
        minHeight: 40,
      },
      default: {
        minHeight: 30,
      },
    }),
  },
});