import React from 'react';
import { CaretRight, CurrencyCircleDollar } from 'phosphor-react-native';
import { Image, StyleSheet } from 'react-native';
import type { GestureResponderEvent, ImageSourcePropType } from 'react-native';
import { TouchableOpacity } from 'react-native';
import { Box } from '../Box';
import { Text } from '../Text';
import { fonts } from '../../theme/theme';

interface Props {
  label: string;
  onPress: (event: GestureResponderEvent) => void;
  children?: JSX.Element;
  renderItem?: JSX.Element;
  image?: ImageSourcePropType;
  typeBalance?: boolean;
}

/**
 * @label Button title
 * @onPress Called when the touch is released, but not if cancelled
 * @image Receives an image source to display instead of the label
 * @renderItem Receives a JSX element to render into the body of button
 * @children Receives a JSX element to render into the bottom of button
 **/
export const Select = ({
  label,
  onPress,
  children,
  renderItem,
  image,
  typeBalance,
}: Props) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Box
        py="spacing-xs"
        px="spacing-s"
        backgroundColor="white"
        borderRadius={4}
        minHeight={typeBalance ? 54 : 48}
        justifyContent="center"
        style={typeBalance && { backgroundColor: '#E3ECFF' }}
      >
        <Box
          alignItems="center"
          justifyContent="space-between"
          flexDirection="row"
        >
          {typeBalance && (
            <Box style={styles.iconLeft}>
              <CurrencyCircleDollar
                weight="fill"
                color={typeBalance ? '#31549E' : '#2B2845'}
                size={22}
              />
            </Box>
          )}
          <Box flex={1} flexDirection="row" justifyContent="space-between">
            {image ? (
              <Image source={image} style={styles.image} />
            ) : (
              <Text
                color={typeBalance ? 'diferente' : 'yankeesBlue'}
                variant="body"
                fontFamily={fonts.caustenRoundRegular}
                children={label}
              />
            )}
            {renderItem}
          </Box>
          <Box style={styles.arrow}>
            <CaretRight
              weight="regular"
              color={typeBalance ? '#31549E' : '#2B2845'}
              size={16}
            />
          </Box>
        </Box>
        {children}
      </Box>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  image: {
    height: 30,
    width: '40%',
    resizeMode: 'contain',
  },
  arrow: {
    marginRight: -4,
  },
  iconLeft: {
    marginRight: 10,
  },
});