import React, { PureComponent } from 'react';
import { View } from 'react-native';
import { cloneDeep, find, get } from 'lodash-es';
import { Button } from './Button';
import { Swatches } from './Swatches';
import { Stepper } from './Stepper';
import FSI18n, { translationKeys } from '@brandingbrand/fsi18n';
export class AddToCart extends PureComponent {
    constructor(props) {
        super(props);
        this.changeQty = (count) => {
            this.setState(prevState => {
                return { quantity: count };
            });
        };
        this.addToCart = () => {
            const { commerceDataSource, onAddToCart } = this.props;
            const { quantity, variantId } = this.state;
            let response;
            if (!quantity || !variantId) {
                response = Promise.reject(new Error('Quantity and VariantID must be defined to add to cart'));
            }
            else {
                response = commerceDataSource.addToCart(variantId, quantity);
            }
            if (onAddToCart) {
                onAddToCart(response);
            }
        };
        this.updateOption = (name, value) => {
            const { optionValues } = this.state;
            const { product, onChangeOption } = this.props;
            const newOptionValues = [...optionValues];
            const optionIndex = newOptionValues.findIndex(option => option.name === name);
            if (optionIndex === -1) {
                newOptionValues.push({ name, value });
            }
            else {
                newOptionValues[optionIndex].value = value;
            }
            const variant = find(product.variants, {
                optionValues: newOptionValues
            });
            this.setState({
                optionValues: newOptionValues,
                variantId: (variant && variant.id) || undefined
            });
            if (onChangeOption) {
                onChangeOption(name, value, variant);
            }
        };
        this.state = {
            quantity: 1,
            optionValues: [],
            variantId: this.determineVariant(props)
        };
    }
    static getDerivedStateFromProps(nextProps) {
        const { defaultVariantId, product } = nextProps;
        const variant = defaultVariantId ?
            product.variants && product.variants.find(variant => variant.id === defaultVariantId) :
            get(product.variants, '0');
        if (variant) {
            return {
                variantId: variant.id,
                optionValues: cloneDeep(variant.optionValues)
            };
        }
        return null;
    }
    determineVariant(props) {
        if (props.product &&
            props.product.id &&
            !props.product.variants) {
            return props.product.id;
        }
        return '';
    }
    _renderStepper() {
        const { renderStepper, stepperProps } = this.props;
        if (renderStepper) {
            return renderStepper(this.changeQty);
        }
        else {
            return (<Stepper count={1} onIncreaseButtonPress={this.changeQty} onDecreaseButtonPress={this.changeQty} {...stepperProps}/>);
        }
    }
    _renderButton() {
        const { renderButton, buttonProps } = this.props;
        if (renderButton) {
            return renderButton(this.addToCart);
        }
        else {
            return (<Button title={FSI18n.string(translationKeys.flagship.cart.actions.add.actionBtn)} onPress={this.addToCart} {...buttonProps}/>);
        }
    }
    render() {
        const { product, swatchesProps, style, swatchesStyle, stepperStyle, buttonStyle, actionBarStyle } = this.props;
        const { optionValues } = this.state;
        return (<View style={style}>
        {product.options && (<View style={swatchesStyle}>
            {product.options.map((option, index) => {
            const defaultOption = optionValues.find(value => option.name === option.id);
            return (<Swatches key={index} title={option.name} items={option.values} defaultValue={defaultOption ? defaultOption.value : undefined} onChangeSwatch={this.updateOption.bind(this, option.id)} {...swatchesProps}/>);
        })}
          </View>)}
        <View style={[{ flexDirection: 'row' }, actionBarStyle]}>
          <View style={[{ flex: 1 }, stepperStyle]}>
            {this._renderStepper()}
          </View>
          <View style={[{ flex: 1 }, buttonStyle]}>
            {this._renderButton()}
          </View>
        </View>
      </View>);
    }
}
//# sourceMappingURL=AddToCart.js.map