import React from 'react'
import {
  View,
  TouchableOpacity,
  Text,
  TouchableOpacityProps,
  ColorValue,
} from 'react-native'

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

const primaryColor = colors.purples.purple4
const secondaryColor = colors.white

type BannerProps = {
  title: string
  acceptText: string
  dismissText: string
  onAccept: () => void
  onDismiss: () => void
}

export const Banner: React.FC<BannerProps> = ({
  title,
  acceptText,
  dismissText,
  onAccept,
  onDismiss,
}) => {
  return (
    <View
      style={{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        backgroundColor: primaryColor,
        paddingHorizontal: 30,
        paddingVertical: 22,
        zIndex: 9,
      }}
    >
      <Text
        style={[
          TextStyles.button,
          {
            color: secondaryColor,
            paddingBottom: 22,
          },
        ]}
      >
        {title}
      </Text>
      <View
        style={{
          flexDirection: 'row',
          flex: 1,
          alignContent: 'space-between',
        }}
      >
        <Button
          title={dismissText}
          backgroundColor={primaryColor}
          color={secondaryColor}
          onPress={onDismiss}
        />
        <View style={{ paddingHorizontal: 8 }} />
        <Button
          title={acceptText}
          onPress={onAccept}
          backgroundColor={secondaryColor}
          color={primaryColor}
        />
      </View>
    </View>
  )
}
type ButtonProps = {
  onPress?: TouchableOpacityProps['onPress']
  title: string
  color: ColorValue
  backgroundColor: ColorValue
}
const Button: React.FC<ButtonProps> = ({
  onPress,
  title,
  color,
  backgroundColor,
}) => (
  <TouchableOpacity onPress={onPress} style={{ flexGrow: 1, flexBasis: 0 }}>
    <View
      style={{
        backgroundColor,
        borderColor: secondaryColor,
        padding: 9,
        borderRadius: 12,
        borderWidth: 1,
        alignItems: 'center',
      }}
    >
      <Text style={[TextStyles.button, { color }]}>{title}</Text>
    </View>
  </TouchableOpacity>
)