import React from 'react';
import {
  TouchableWithoutFeedback,
  ImageBackground,
  View,
  Text,
  StyleSheet,
} from 'react-native';
import {RestConstant} from 'constants';
import {cutStringProduct, currencyFloatNoSymbol} from 'helpers';
import {RFValue} from 'react-native-responsive-fontsize';
import {Colors, FONTS} from 'global-styles';

const TransactionProductCard = props => (
  <TouchableWithoutFeedback onPress={props.onAdd}>
    <View style={style.cardProduct}>
      {props.data.image.Valid ? (
        <ImageBackground
          source={{uri: RestConstant.BASE_URL + props.data.image.String}}
          resizeMode="cover"
          style={style.thumbnail}
          imageStyle={{
            borderTopLeftRadius: RFValue(5),
            borderTopRightRadius: RFValue(5),
          }}
        />
      ) : (
        <View style={style.thumbnail}>
          <Text
            style={{
              color: Colors.SECONDARY,
              fontFamily: FONTS.poppins[500],
              fontSize: RFValue(32),
              textAlign: 'center',
            }}>
            {cutStringProduct(props.data.name)}
          </Text>
        </View>
      )}
      <View>
        <Text style={{color: 'black'}} numberOfLines={2}>
          {props.data.name}
        </Text>
        <Text style={style.cardPrice}>
          Rp {currencyFloatNoSymbol(parseFloat(props.data.selling_price))}
        </Text>
      </View>
    </View>
  </TouchableWithoutFeedback>
);

export default TransactionProductCard;

const style = StyleSheet.create({
  cardProduct: {
    flex: 1,
    backgroundColor: Colors.WHITE,
    marginHorizontal: RFValue(4),
    marginVertical: RFValue(4),
    elevation: 1,
    height: RFValue(132),
    borderRadius: RFValue(5),
  },
  thumbnail: {
    width: '100%',
    height: RFValue(70),
    justifyContent: 'center',
    borderTopLeftRadius: RFValue(5),
    borderTopRightRadius: RFValue(5),
    backgroundColor: Colors.TERTIARY,
  },
  cardPrice: {
    position: 'absolute',
    right: RFValue(5),
    top: RFValue(35),
    color: 'black',
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(10),
  },
});
