import React from 'react'
import {
  TouchableOpacity,
  Text,
  GestureResponderEvent,
  StyleProp,
  ViewStyle,
  TextStyle,
  TouchableOpacityProps,
} from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'

/**
 * Figma: https://www.figma.com/file/PKczUvdmkqdqIvKBgmWsqO/Components?node-id=5462%3A6985
 */
export const MenuButton: React.FC<
  {
    onPress: (event: GestureResponderEvent) => void
    muted?: boolean
    style?: StyleProp<ViewStyle>
    textStyle?: StyleProp<TextStyle>
    icon?: JSX.Element
  } & TouchableOpacityProps
> = ({
  onPress,
  children,
  muted,
  style,
  textStyle,
  icon,
  ...touchableOpacityProps
}) => {
  const isTextChild = typeof children === 'string' || children instanceof String

  return (
    <TouchableOpacity
      disabled={muted}
      onPress={onPress}
      style={[
        {
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          minHeight: 48,
          paddingVertical: 12,
          paddingHorizontal: 16,
          backgroundColor: colors.metals.metal2,
          borderRadius: 8,
        },
        !isTextChild && { paddingTop: 10, paddingBottom: 10 },
        style,
      ]}
      {...touchableOpacityProps}
    >
      {isTextChild ? (
        <Text
          style={[
            {
              ...TextStyles.bodyMedium,
              color: colors.white,
            },
            textStyle,
          ]}
        >
          {children}
        </Text>
      ) : (
        children
      )}
      {icon}
    </TouchableOpacity>
  )
}