import { requireNativeViewManager } from 'expo-modules-core';
import * as React from 'react';
import { Platform, StyleSheet } from 'react-native';

import { ButtonType, RNWalletViewProps } from './RNWallet.types';
import { Constants } from './RNWalletModule';

const NativeView: React.ComponentType<
  Omit<RNWalletViewProps, 'onPress'> & { onButtonPress?: () => void }
> = requireNativeViewManager('RNWallet');

export default function RNWalletView({
  onPress,
  style,
  buttonType = ButtonType.PRIMARY,
  ...props
}: RNWalletViewProps) {
  return (
    <NativeView
      onButtonPress={onPress}
      style={[
        styles.button,
        Platform.select({
          android: {
            width: Constants.buttonLayout!.baseWidthFromType(buttonType),
          },
          ios: {},
        }),
        style,
      ]}
      buttonType={buttonType}
      {...props}
    />
  );
}

const styles = StyleSheet.create({
  button: Platform.select({
    ios: {
      width: Constants.buttonLayout?.baseWidth,
      height: Constants.buttonLayout?.baseHeight,
    },
    android: {
      height: Constants.buttonLayout?.baseHeight,
    },
  })!,
});