Button.tsx

import React from 'react'
import ButtonIcon from './ButtonIcon'
import ButtonLabel from './ButtonLabel'
import styled from 'styled-components/native'
import ButtonInterface from './ButtonInterface'
import { TouchableWithoutFeedback } from 'react-native'

const ButtonContainer = styled.View<ButtonInterface>`
  align-items: center
  justify-content: center
  height: ${({ theme }) => theme.buttons.height}
  padding-left: ${({ theme, circle }) => circle ? theme.padding : 0}
  padding-right: ${({ theme, circle }) => circle ? theme.padding : 0}
  ${({ theme, circle }) => circle ? `width: ${theme.buttons.height}` : ''}
  ${({ theme, color, outline, disabled }) => {
    return _applyColor({ theme, color, outline, disabled })
  }}
  border-radius: ${({ theme, radius, circle }) => {
    return circle
      ? theme.buttons.height / 2
      : theme.radius[radius || 'small']
  }}
`

type ApplyColorInterface = Pick<
  ButtonInterface, 'theme' | 'color' | 'outline' | 'disabled'
>

const _applyColor = (props: ApplyColorInterface) => {
  const { theme, color, outline, disabled } = props
  const styleProp = outline ? 'border-color' : 'background-color'
  const shadow = color.split('-').length > 1 ? color.split('-')[1] : 'regular'

  const buttonColor = disabled
    ? theme.colors.secondary.dark
    : theme.colors[color.split('-')[0]][shadow]

  return `${styleProp}: ${buttonColor}
${outline ? `border-width: ${theme.buttons.borderWidth}` : ''}
`
}

const Button: React.FC<ButtonInterface> = (props) => {
  const { theme, icon, label, onPress } = props

  const buttonContainerProps = { ...props }
  const buttonIconProps = { theme, icon }
  const buttonLabelProps = { theme, icon, label }

  delete buttonContainerProps['onPress']

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <ButtonContainer {...buttonContainerProps}>
        <ButtonIcon {...buttonIconProps} />
        <ButtonLabel {...buttonLabelProps} />
      </ButtonContainer>
    </TouchableWithoutFeedback>
  )
}

Button.defaultProps = {
  loading: false,
  disabled: false
}

export default Button