var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import React, { PureComponent } from 'react';
import FSI18n, { translationKeys } from '@brandingbrand/fsi18n';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Stepper } from '../Stepper';
import { CartItemDetails } from './CartItemDetails';
const decreaseBtn = require('../../../assets/images/decreaseImage.png');
const increaseBtn = require('../../../assets/images/increaseImage.png');
const defaultStyle = StyleSheet.create({
    container: {
        flexDirection: 'row'
    },
    rightColumn: {
        flex: 1,
        paddingLeft: 10
    },
    quantityRow: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 10
    }
});
export class CartItem extends PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            image: undefined,
            imageStyle: undefined
        };
        this.renderRemoveButton = () => {
            const { renderRemoveButton, removeButtonStyle, removeButtonTextStyle, removeItem, updateQty } = this.props;
            if (renderRemoveButton) {
                return renderRemoveButton(this.props, updateQty, removeItem);
            }
            return (<TouchableOpacity onPress={this.handleRemove}>
        <View style={removeButtonStyle}>
          <Text style={removeButtonTextStyle}>
            {FSI18n.string(translationKeys.flagship.cart.actions.remove.actionBtn)}
          </Text>
        </View>
      </TouchableOpacity>);
        };
        this.handleIncrease = () => __awaiter(this, void 0, void 0, function* () {
            return this.props.updateQty(this.props, this.props.quantity + 1);
        });
        this.handleDecrease = () => __awaiter(this, void 0, void 0, function* () {
            let { quantity } = this.props;
            return this.props.updateQty(this.props, --quantity >= 0 ? quantity : 0);
        });
        this.handleRemove = () => __awaiter(this, void 0, void 0, function* () {
            return this.props.removeItem(this.props);
        });
        this.handleImagePress = () => {
            if (this.props.onImagePress) {
                this.props.onImagePress(this.props);
            }
        };
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        return {
            image: nextProps.images && nextProps.images.find(img => !!img.uri),
            imageStyle: {
                height: nextProps.imageHeight,
                width: nextProps.imageWidth
            }
        };
    }
    render() {
        const { itemText, leftColumnStyle, price, productId, quantity, quantityRowStyle, removeItem, renderDetails, renderPromo, renderStepper, rightColumnStyle, stepperStyle, style, totalPrice, updateQty } = this.props;
        return (<View style={[defaultStyle.container, style]}>
        {this.state.image && (<View style={leftColumnStyle}>
            {this.renderImage()}
          </View>)}
        <View style={[defaultStyle.rightColumn, rightColumnStyle]}>
          {renderDetails && renderDetails(this.props, updateQty, removeItem) || (<CartItemDetails itemText={itemText} productId={productId} price={price} totalPrice={totalPrice}/>)}
          <View style={[defaultStyle.quantityRow, quantityRowStyle]}>
            {renderStepper && renderStepper(this.props, updateQty, removeItem) || (<Stepper count={quantity} stepperStyle={stepperStyle} onDecreaseButtonPress={this.handleDecrease} onIncreaseButtonPress={this.handleIncrease} decreaseButtonImage={decreaseBtn} increaseButtonImage={increaseBtn}/>)}
            {this.renderRemoveButton()}
          </View>
          {renderPromo && renderPromo(this.props, updateQty, removeItem)}
        </View>
      </View>);
    }
    renderImage() {
        if (!this.state.image) {
            return null;
        }
        if (this.props.onImagePress) {
            return (<TouchableOpacity accessibilityTraits='link' onPress={this.handleImagePress}>
          <Image source={this.state.image} style={this.state.imageStyle}/>
        </TouchableOpacity>);
        }
        else {
            return <Image source={this.state.image} style={this.state.imageStyle}/>;
        }
    }
}
CartItem.defaultProps = {
    imageHeight: 100,
    imageWidth: 100
};
//# sourceMappingURL=CartItem.js.map