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

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
const styles = StyleSheet.create({
  base: {
    paddingTop: 11,
    paddingBottom: 12,
    paddingHorizontal: 32,
    backgroundColor: 'transparent',
    borderRadius: 100,
    borderColor: colors.offWhite,
    borderWidth: 2,
    alignItems: 'center',
  },
  muted: {
    borderColor: colors.metals.metal2,
    backgroundColor: colors.metals.metal2,
  },
  chromeless: {
    borderColor: 'transparent',
    backgroundColor: 'transparent',
  },
})

const textStyles = StyleSheet.create({
  base: { ...TextStyles.bodyMedium, color: colors.white },
  muted: {
    color: colors.offWhite,
  },
  filledNotMuted: {
    color: colors.black,
  },
})

export type ButtonType = 'filled' | 'chromeless'

/**
 * Figma: https://www.figma.com/file/PKczUvdmkqdqIvKBgmWsqO/2.0---Components?node-id=4057%3A8143
 */
export const Button: React.FC<
  {
    onPress: (event: GestureResponderEvent) => void
    type?: ButtonType
    muted?: boolean
    style?: StyleProp<ViewStyle>
    textStyle?: StyleProp<TextStyle>
  } & TouchableOpacityProps
> = ({ onPress, children, type, muted, style, textStyle, ...rest }) => {
  const backgroundColor = muted ? colors.metals.metal2 : colors.white
  const borderColor = type === 'filled' ? colors.white : colors.offWhite
  const isTextChild = typeof children === 'string' || children instanceof String
  return (
    <TouchableOpacity
      disabled={muted}
      onPress={onPress}
      style={[
        styles.base,
        { borderColor },
        type === 'filled' && { backgroundColor },
        muted && styles.muted,
        type === 'chromeless' && styles.chromeless,
        !isTextChild && { paddingTop: 10, paddingBottom: 10 },
        style,
      ]}
      {...rest}
    >
      {isTextChild ? (
        <Text
          style={[
            textStyles.base,
            muted && textStyles.muted,
            type === 'filled' && !muted && textStyles.filledNotMuted,
            textStyle,
          ]}
        >
          {children}
        </Text>
      ) : (
        children
      )}
    </TouchableOpacity>
  )
}